2

我一直在学习普通版的 Web 组件，但遇到了障碍。当尝试使用模板标签内的引​​导程序中的网格时，特别是容器类，它不会对其应用任何引导程序样式。

//Template File
<template>

  <top-bar>
    <div class="container">
      <h1>Hello World</h1>
    </div>
  </top-bar>

</template>

<script>
  var el = document.querySelectorAll('top-bar');
  if(el != null) {
    //Custom Elements
    document.registerElement('top-bar');
    //Import Elements
    for(var i = 0; i < el.length; i++) {
      var shadow = el[i].createShadowRoot();
      var template = document.querySelector('#topbar').import.querySelector('template');
      var clone = document.importNode(template.content, true);
      shadow.appendChild(clone);
    }
  }
</script>

一般的 Bootstrap 样式（字体、样式重置等）正在正确应用，并且没有出现控制台错误。

//Index File
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Components</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="import" href="topbar.html" id="topbar">
</head>
<body>

  <top-bar></top-bar>

</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</html>

我试图将引导程序的链接和脚本文件放在模板文件中（但在模板标签之外，因为链接标签不会在模板标签中呈现）。Bootstrap 将像我在索引页面上调用它一样加载，但容器仍然不会从 Bootstrap 继承任何样式。

非常感谢您提供的任何帮助！

4

2 回答 2

2

Shadow DOM 停止 CSS 传播。如果您想要自然的 CSS 传播，请不要使用 Shadow DOM。

var shadow = el[i] //.createShadowRoot();  //will work

PS：

1°）您的使用<template>是错误的：不要嵌套<top-bar>标签。

2°）您对 registerElement 的使用毫无意义。给你的新元素一个原型。

没有 Shadow DOM 的自定义元素和模板的 topbar.html 的正确实现是：

<template>
    <div class="container">
        <h1>Hello World</h1>
    </div>
</template>

<script>

//Import Elements
var template = document.querySelector('#topbar').import.querySelector('template');

//Custom Elements
var topBar = Object.create( HTMLElement.prototype )

topBar.createdCallback = function ()
{
    var shadow = this //.createShadowRoot()
    var clone = document.importNode( template.content, true );
    shadow.appendChild( clone );
}

document.registerElement( 'top-bar', { prototype: topBar } );

</script>
于 2015-08-17T15:37:30.653 回答
0

请注意我在 2019 年 3 月 1 日谷歌浏览器收到的这条消息：

[弃用] document.registerElement 已弃用，将于 2019 年 3 月左右在 M73 中移除。请改用 window.customElements.define。有关详细信息，请参阅https://www.chromestatus.com/features/4642138092470272 。

所以现在，insteadOf : document.registerElement( 'approve-btn', { prototype: myCustomElement } );

...现在看来我们需要做：

customElements.define("approve-btn", myCustomElement);

其中 mycustomElement 应该是这样的类：

class ApproveBtn extends HTMLElement {
  constructor() {
    // Always call parent constructor first
    super();

    // Get template content from DOM
    this.template = document.getElementById("approve-btn");
    this.templateContent = this.template.content;

    this.appendChild(this.templateContent);


  }
 }

然后最后执行：

customElements.define("approve-btn", ApproveBtn);
于 2019-03-01T17:38:55.890 回答