使用带有模板标签的引导程序答案

【问题标题】：Using Bootstrap With The Template Tag使用带有模板标签的引导程序
【发布时间】：2015-07-31 15:37:17
【问题描述】：

我一直在学习普通版的 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 继承任何样式。

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

【问题讨论】：

标签： twitter-bootstrap web-component html5-template html-imports

【解决方案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>

【讨论】：

【解决方案2】：

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

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

所以现在，而不是： document.registerElement('approve-btn', {原型: 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);

【讨论】：