javascript - CustomElements V1 和 ShadowDOM 的外部样式

Question

虽然这似乎是一个重复的问题，但之前提出的那些问题都是基于 Polymer，而不是原生的 CustomElements，而且这是关于 css 本身，而不是渗透 ShadowDOM 或自定义 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 时如何隔离样式。

如果有 <style> 的内容就好了里面<template>存储在外部文件中，可能由 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 .