CustomElements V1 和 ShadowDOM 的外部样式

Question

虽然这似乎是一个重复的问题，但之前提出的问题都是基于 Polymer，而不是原生的 CustomElements，而这是关于 css 本身，而不是穿透 ShadowDOM 或 Custom CSS 属性/变量

所以这里我们有一个简单的自定义元素（注意：在撰写本文时，它仅适用于较新的 Chrome 版本）

class StyleMe extends HTMLElement {
 constructor () {
  super();
  let shadow = this.attachShadow({ mode: 'closed' });
  shadow.appendChild(document.querySelector('#style-me').content.cloneNode(true));
 }
}
customElements.define('style-me', StyleMe);

h1 {
 /* even !important doesn't penetrate */
 color: red !important;
}

<h1>I'm a normal heading</h1>
<style-me>I'm heading hidden in style-me's shadow</style-me>
<template id="style-me">
 <style>
  :host {
   background: blue;
   display: block;
  }
  h1 {
   color: yellow;
  }
 </style>
 <h1><slot></slot></h1>
</template>

这很好地展示了在使用 ShadowDOM 时如何隔离样式。

最好的做法是将 <template> 中 <style> 的内容存储在外部文件中，可能由 less 等预处理器生成。

经过多次搜索才找到与 Polymer 相关的答案后，我一片空白，有什么想法吗？

我不是在寻找他们允许我使用的自定义属性

<style>
    :host {
        background: blue;
        display: block;
    }
    h1 {
        color: var(--something);
    }
</style>

并使用

设置颜色

style-me {
    --something: yellow;
}

我的问题是关于搬家

:host {
    background: blue;
    display: block;
}
h1 {
    color: yellow;
}

离开 <style> 标签并进入单独的文件

Answer 1

您可以使用 CSS @import url 指令。

<template id="style-me">
    <style>
        @import url( '/css/style.css' )
    </script>
    <h1><slot></slot></h1>
</template>

问题是discussed here。

Answer 2

我意识到这个问题已有一年多了，但您可能会开始查看 constructible style sheet specification/proposal。

这将允许您执行以下操作：

const customStyleSheet = new CSSStyleSheet();
await customStyleSheet.replace("@import url('/css/style.css')");
shadowDOMReference.adoptedStyleSheets = [ customStyleSheet ];

CustomElements V1 和 ShadowDOM 的外部样式

External Styling for CustomElements V1 & ShadowDOM

javascript

html

css

custom-element

html5-template