将样式导入Web组件的规范方法是什么?
以下是一个错误的HTML元素< link>在阴影树中被忽略:
- <template>
- <link rel="style" href="foo.css" />
- <h1>foo</h1>
- </template>
我使用以下方法使用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
- });
解决方法
现在直接< link>阴影dom支持tag.
可以直接使用:
- <link rel="stylesheet" href="yourcss1.css">
- <link href="yourcss2.css" rel="stylesheet" type="text/css">
它已被whatwg和W3C批准.
在阴影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.