Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

经过大量搜索才找到与聚合物有关的答案我还画了一个空白，有什么想法吗？

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

<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＆amp; ShadowDOM

2 个答案: