Twitter bootstrap 使用带模板标记的引导_Twitter Bootstrap_Web Component_Html5 Template_Html Imports

Twitter bootstrap 使用带模板标记的引导

twitter-bootstrap

Twitter bootstrap 使用带模板标记的引导,twitter-bootstrap,web-component,html5-template,html-imports,Twitter Bootstrap,Web Component,Html5 Template,Html Imports,我一直在学习web组件的普通版本，但遇到了一个障碍。当尝试在模板标记（特别是容器类）内部使用引导网格时，它不会对其应用任何引导样式 //Template File <template> <top-bar> <div class="container"> <h1>Hello World</h1> </div> </top-bar> </template> <

我一直在学习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>

//模板文件
你好，世界
var el=document.queryselectoral（'top-bar'）；
如果（el！=null）{
//自定义元素
文件。注册表项（“顶栏”）；
//导入元素
对于（变量i=0；i


常规引导样式（字体、样式重置等）正在正确应用，没有出现控制台错误
//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>

//索引文件
Web组件

我尝试将引导的链接和脚本文件放在模板文件中（但模板标记之外的链接标记不会在模板标记中呈现）。引导将加载，就像我在索引页上调用它一样，但容器仍然不会从引导中继承任何样式
非常感谢您提供的任何帮助 阴影DOM停止CSS传播。
如果想要自然的CSS传播，不要使用阴影DOM
var shadow = el[i] //.createShadowRoot();  //will work

附言：
1°）您使用的
是错误的：不要嵌套
标记
2°）您对registerElement的使用是毫无意义的。给你的新元素一个原型
对于自定义元素和模板，在没有阴影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>


你好，世界
//导入元素
var template=document.querySelector（'#topbar'）。import.querySelector（'template'）；
//自定义元素
var topBar=Object.create（HTMLElement.prototype）
topBar.createdCallback=函数（）
{
var shadow=this/.createShadowRoot（）
var clone=document.importNode（template.content，true）；
shadow.appendChild（克隆）；
}
registerElement（'topBar'，{prototype:topBar}）；
请注意我从2019年3月1日google Chrome收到的消息：
[Deprecation]document.registerElement已弃用，将在2019年3月左右的M73中删除。请改用window.customElements.define。有关更多详细信息，请参阅
因此，现在，代替：
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);