html - 将样式导入Web组件

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

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

<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
});

最佳答案

现在，影子dom支持直接<link>标记。

一个可以直接使用:

<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中使用。

关于html - 将样式导入Web组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28664207/