Question

我一直在学习Web组件的vanilla版本，并且遇到了麻烦。当尝试在模板标记内部使用引导网格时，特别是容器类时，它不会对其应用任何引导样式。

//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将加载，就像我在索引页面上调用它一样，但容器仍然不会从Bootstrap继承任何样式。

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

Answer 1

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

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

PS：

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

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

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

<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>

Answer 2

请注意，自2019年3月1日起，我收到Google Chrome浏览器的此消息：

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

所以现在，代替Of： 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);

使用带有模板标记的Bootstrap

2 个答案: