我正在尝试使用HTML 5构建自定义HTML元素 . 问题是我无法将样式应用于使用外部CSS提供的Shadow DOM元素 . 代码在chrome浏览器中运行,但在Firefox中不运行 .
HTML代码:
HTML5 | Custom ElementsJS代码:
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有什么问题 . 需要帮忙 .