Question

我尝试使用HTML 5构建自定义HTML元素。问题是我无法将样式应用于使用外部CSS提供的Shadow DOM元素。代码在chrome浏览器中运行，但在Firefox中不运行。

HTML代码：

<!doctype html>
<html>
    <head>
        <title>HTML5 | Custom Elements</title>
        <link type="text/css" rel="stylesheet" href="simple-elem.css">
        <script type="text/javascript" src="simple-elem.js"></script>
    </head>
    <body>
        <simple-element></simple-element>
    </body>
</html>

JS代码：

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {

    console.log('Element creation started...');

    var inputTextElement = document.createElement('input');
    inputTextElement.type = 'text';
    inputTextElement.className = 'simpleElem';

    // Shadow DOM root
    var shadowRoot = this.createShadowRoot();

    shadowRoot.appendChild(inputTextElement);

    console.log('Element creation ended...');

};

var SimpleElement = document.registerElement('simple-element', { prototype: proto });

CSS代码：

simple-element {
}

simple-element::shadow  .simpleElem {
    height: 30px;
    margin: 0px;
    padding: 0px;
    width: 180px;
}

无法弄清楚Firefox有什么问题。需要帮助。

Answer 1

Firefox尚未支持Shadow DOM，请参阅CanIUse.com。我建议坚持使用Chrome。编辑：FF夜间has some support，可以手动启用。

Answer 2

如Gábor Imre所述，Firefox中默认不启用Shadow DOM，因为它仍在开发中。但是，您可以使用polyfill在所有不支持它的浏览器中获得相当不错的Shadow DOM行为。如果这样做，您将需要使用polyfill-next-selector来获取行为你想要的。

Answer 3

虽然Firefox现已支持阴影DOM已有一段时间（使另外两个答案无效），但是使用Firefox 72，您现在可以通过part属性和{{1}来定位自定义/阴影DOM元素}伪元素，分别为：

::part()

//this JS boilerplate adapted from MDN
let template = document.getElementById("simple-element");
globalThis.customElements.define(template.id, class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content);
  }
});

simple-element::part(shadow) {
    height: 30px;
    margin: 0;
    padding: 0;
    width: 180px;
    background: green;
}

显然，此代码与您的问题代码看起来有很大不同，因为自2014年以来Shadow DOM规范/实现已发生了很大变化。

HTML5 - 在Firefox浏览器中使用外部CSS文件设置ShadowDOM元素

HTML代码：

JS代码：

CSS代码：

3 个答案: