Web 组件中 shadow dom 的外部样式表答案

【问题标题】：External stylesheets for shadow dom in web componentsWeb 组件中 shadow dom 的外部样式表
【发布时间】：2015-01-02 18:12:35
【问题描述】：

我正在学习带有影子根的 Web 组件，如果使用开箱即用的代码可以加载外部样式表，我似乎无法在 google 上找到？我没有使用聚合物或任何其他网络组件库（还）。代码如下：

<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
    var hollaProto = Object.create(HTMLElement.prototype);
    hollaProto.createdCallback = function () {
        var shadow = this.createShadowRoot();
        var content = document.querySelector('link[rel=import]').import.querySelector("div");

        $("button[data-command=holla]", content).on("click", function () { alert("Holla!"); });

        shadow.appendChild(content);
    };
    var hollaWidget = document.registerElement("holla-back", {
        prototype: hollaProto
    });
</script>
<div class="holla-back">
    <button data-command="holla">Holla!</button>
</div>

如果我把我的链接标签放在顶部，在第一个脚本标签之上，我设计了整个 web 时代，而不是 web 组件。

如果我把它放在div.holla-back 下，它不会有任何样式。

如何在 Web 组件中使用外部样式表？

【问题讨论】：

标签： javascript html web-component shadow-dom

【解决方案1】：

链接标签在 Shadow DOM according to the spec 中是惰性的。但是，您可以使用@import，尽管这有其自身的性能问题。

Polymer 解决这个问题的方法是查看link 标签并使用xhr 加载这些样式并应用它们。

编辑：

Shadow DOM 的开发人员已经意识到了这个缺点，并且需要对其进行修复。希望将来我们可以提出一个支持外部样式表的系统。

【讨论】：

你能用@import 澄清一下吗？
你可以这样做：jsbin.com/qefoyi/1/edit 但是大量使用@import 会导致大量的http请求并且真的减慢你的页面。推荐的方法是使用已经包含所有标记的样式元素。
我明白你的意思。它很丑，但实现了我想要的，虽然你是对的，它增加了很多请求。
@robdodson 不能使用相同的参数来表示您也不应该在文档标题中使用 link 吗？然而，link 在这种情况下通常被认为是最佳实践。
这个答案真的可以从一些参考资料或更多信息的链接中受益。例如，解释@import 存在哪些性能问题，以及指向“从事 Shadow DOM 工作的人们”正在努力解决这个缺点的地方的链接会很好。我无法在 W3C 邮件列表档案中找到任何讨论主题...

【解决方案2】：

Shadow DOM 不对链接标签做出反应。事实上，当您使用链接标签时，Chrome 41 会引发错误。我们通过在构建时使用 vulcanize 内联 CSS 类来解决这个限制。事实证明，这在分离 CSS 和组件定义方面非常方便。

【讨论】：