shadowdomv1在火狐上的兼容性
shadowdomv1在火狐上的兼容性
提问于 2017-11-03 03:05:31
我正在尝试使用ShadowDomv1 (与https://github.com/webcomponents/webcomponentsjs和https://github.com/webcomponents/shadycss一起使用)，但它不起作用。
ShadowDom本身可以工作，但是css没有封装(正如我们在h2 css规则中看到的那样)。
它在Chrome和Safari上都能正常工作(但它们本身都支持ShadowDomv1 )。
我是不是错过了什么，还是不可能？
这里是jsbin：http://jsbin.com/maqohoxowu/edit?html,output
和代码：
<script type="text/javascript" src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<style type="text/css">
h2 {
color: red;
border-bottom: 1px black dotted;
}
</style>
<h2>h2 red and dotted</h2>
<my-element>
</my-element>
<template id="myElementTemplate">
<style scope="my-element">
h2 {color: blue}
</style>
<div>
<h2>h2 blue and not dotted !</h2> <!-- Should not be dotted because of the encapsulation -->
</div>
</template>
<script type="text/javascript">
ShadyCSS.prepareTemplate(myElementTemplate, 'my-element');
class MyElement extends HTMLElement {
connectedCallback() {
ShadyCSS.styleElement(this);
if (!this.shadowRoot) {
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
}
ShadyCSS.styleElement(this);
}
}
customElements.define("my-element", MyElement);
</script>回答 3
Stack Overflow用户
发布于 2017-11-04 05:10:50
您可以使用CustomStyleInterface将文档级样式仅应用于非阴影DOM：
const CustomStyleInterface = window.ShadyCSS.CustomStyleInterface;
CustomStyleInterface.addCustomStyle(document.querySelector('style.doc-level'));
class MyElement extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(document.importNode(myElementTemplate.content, true));
}
}
customElements.define("my-element", MyElement);<script src="https://rawgithub.com/webcomponents/webcomponentsjs/master/webcomponents-hi-sd-ce.js"></script>
<script src="https://rawgit.com/webcomponents/shadycss/master/custom-style-interface.min.js"></script>
<style class="doc-level">
h2 {
color: red;
border-bottom: 1px black dotted;
}
</style>
<h2>h2 red and dotted</h2>
<my-element></my-element>
<template id="myElementTemplate">
<style>
h2 {color: blue}
</style>
<div>
<h2>h2 blue and not dotted !</h2>
</div>
</template>
Stack Overflow用户
发布于 2017-11-03 03:08:56
根据Mozillas平台状态页面，Shadow DOM仍在开发中。https://platform-status.mozilla.org/#shadow-dom
Stack Overflow用户
发布于 2017-11-15 11:18:44
polyfill不能模拟由真正的ShadowDOM原生处理的CSS的封装。
相反，如果你打算同时使用两者，那么就避免使用简单的CSS选择器。相反，可以尝试使用CSS命名模式，比如BEM：http://getbem.com/introduction/。
这将允许您的CSS在大多数情况下，在真正的ShadowDOM和ShadyDOM中工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47082858
复制相关文章
相似问题