作者:mobiledu2502916457 | 来源:互联网 | 2023-05-20 19:48
将样式导入Web组件的规范方法是什么?
以下给出了一个错误HTML element is ignored in shadow tree
:
foo
我使用以下方法使用shadow DOM插入它:
var importDoc, navBarProto;
importDoc = document.currentScript.ownerDocument;
navBarProto = Object.create(HTMLElement.prototype);
navBarProto.createdCallback = function() {
var template, templateClone, shadow;
template = importDoc.querySelector('template');
templateClOne= document.importNode(template.content, true);
shadow = this.createShadowRoot();
shadow.appendChild(templateClone);
};
document.registerElement('my-nav-bar', {
prototype: navBarProto
});
Jammer..
9
如果您需要在
标签内放置外部样式,您可以尝试
但我觉得这将在元素创建后开始导入.
1> Jammer..:
如果您需要在
标签内放置外部样式,您可以尝试
但我觉得这将在元素创建后开始导入.
2> Himanshu sha..:
现在
,影子dom支持直接标记。
一个可以直接使用:
它已被whatwg和W3C批准。
在Shadow dom中使用CSS的有用链接:
https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree
https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c
https://github.com/w3c/webcomponents/issues/628
直接的CSS链接可以在影子dom中使用。