首页 文章

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

提问于
浏览 次
3

我正在尝试使用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有什么问题 . 需要帮忙 .

html5 shadow-dom

2 回答

  • 2

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

    回复于
  • 3

    正如Gábor Imre所述，Firefox中默认不启用Shadow DOM，因为它仍处于开发阶段 . 但是，您可以使用polyfill在所有浏览器中获得相当不错的Shadow DOM行为，然后需要使用polyfill-next-selector来获取您想要的行为 .

    回复于

相关问题