firedomv1在firefox上的兼容性

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

我正在尝试使用ShadowDomv1(使用https://github.com/webcomponents/webcomponentsjs和https://github.com/webcomponents/shadycss),但它无法正常工作。

ShadowDom本身可以工作,但是css没有封装(我们可以看到h2css规则)。

它在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>
提问于
用户回答回答于

您可以使用CustomStyleInterface仅将文档级样式应用于非Shadow 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>
用户回答回答于

根据Mozillas平台状态页面,Shadow DOM仍处于开发阶段。 https://platform-status.mozilla.org/#shadow-dom

所属标签

可能回答问题的人

  • 找虫虫

    0 粉丝0 提问6 回答
  • 优惠活动秘书

    0 粉丝2 提问6 回答
  • 天使的炫翼

    17 粉丝531 提问5 回答
  • 爸爸

    腾讯 · 客户端安全 (已认证)

    4 粉丝4 提问5 回答

扫码关注云+社区

领取腾讯云代金券