将样式导入 Web 组件

Question

将样式导入 Web 组件的规范方法是什么？

以下给我一个错误 HTML element <link> is ignored in shadow tree ：

 <template>
    <link rel="style" href="foo.css" />
    <h1>foo</h1>
</template>

我使用影子 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
});

原文由 Ben Aston 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现在直接 <link> 标签在 shadow dom 中被支持。

可以直接使用：

 <link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">

它已被 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链接可以用在shadow dom中。

原文由 Himanshu sharma 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您需要在 <template> 标签内放置外部样式，您可以尝试

<style> @import "../my/path/style.css"; </style>

但是我觉得这将在创建元素 后 开始导入。

原文由 Jammer 发布，翻译遵循 CC BY-SA 3.0 许可协议