0

虽然这似乎是一个重复的问题，之前提出的问题是基于 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 之类的预处理器生成。

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

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

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

并使用设置颜色

style-me {
    --something: yellow;
}

我的问题是关于搬家

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

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

4

2 回答 2

1

我意识到这个问题已经有一年多了，但是您可能会开始查看可构造样式表规范/建议。

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

const customStyleSheet = new CSSStyleSheet();
await customStyleSheet.replace("@import url('/css/style.css')");
shadowDOMReference.adoptedStyleSheets = [ customStyleSheet ];
于 2018-12-17T19:45:03.193 回答
1

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

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

这个问题在这里讨论过。

于 2017-08-28T15:39:59.070 回答