使用引导带和模板标记
我一直在学习普通版的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>一般的引导样式(字体、样式重置等)正在正确应用，没有出现控制台错误。
//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继承任何样式。
任何你能提供的帮助都是非常感谢的！
回答 2
Stack Overflow用户
发布于 2015-08-17 15:37:30
阴影DOM停止CSS传播。如果您想要自然的CSS传播，不要使用Shadow DOM。
var shadow = el[i] //.createShadowRoot(); //will workPS：
1°)使用<template>是错误的:不要使用嵌套的<top-bar>标记。
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>Stack Overflow用户
发布于 2019-03-01 17:38:55
请注意我在3月1日-2019年谷歌Chrome收到的信息：
不推荐的document.registerElement是不推荐的，并将在M73中删除，大约2019年3月。请改用window.customElements.define。有关更多详细信息，请参阅https://www.chromestatus.com/features/4642138092470272。
现在，insteadOf : document.registerElement(‘Appro证-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);https://stackoverflow.com/questions/31750049
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号