首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >shadowdomv1在火狐上的兼容性

shadowdomv1在火狐上的兼容性
EN

Stack Overflow用户
提问于 2017-11-03 03:05:31
回答 3查看 203关注 0票数 1

我正在尝试使用ShadowDomv1 (与https://github.com/webcomponents/webcomponentsjshttps://github.com/webcomponents/shadycss一起使用),但它不起作用。

ShadowDom本身可以工作,但是css没有封装(正如我们在h2 css规则中看到的那样)。

它在Chrome和Safari上都能正常工作(但它们本身都支持ShadowDomv1 )。

我是不是错过了什么,还是不可能?

这里是jsbin:http://jsbin.com/maqohoxowu/edit?html,output

和代码:

代码语言:javascript
复制
<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>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47082858

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档