虽然这可能看起来是一个重复的问题,以前要求的基于聚合物,而不是本地的CustomElements,这是关于CSS本身,没有穿透ShadowDOM或自定义CSS属性/变量CustomElements V1和ShadowDOM的外部样式
所以在这里我们有一个简单的自定义元素(注:为写在新版Chrome这只作品)
class StyleMe extends HTMLElement {
\t constructor() {
\t \t super();
\t \t let shadow = this.attachShadow({ mode: 'closed' });
\t \t shadow.appendChild(document.querySelector('#style-me').content.cloneNode(true));
\t }
}
customElements.define('style-me', StyleMe);
h1 {
\t /* even !important doesn't penetrate */
\t 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">
\t <style>
\t \t :host {
\t \t \t background: blue;
\t \t \t display: block;
\t \t }
\t \t h1 {
\t \t \t color: yellow;
\t \t }
\t </style>
\t <h1><slot></slot></h1>
</template>
这很好地演示如何使用ShadowDOM时的风格是如何隔离。
如果将<template>
中的<style>
的内容存储在外部文件中,可能由预处理器(例如less)生成,那么该做什么最好。
后仅一番搜索找到相关的高分子我已经得出一个空白的答案,有什么想法?
我不是在寻找自定义属性,他们会允许我使用
<style>
:host {
background: blue;
display: block;
}
h1 {
color: var(--something);
}
</style>
并设置使用
style-me {
--something: yellow;
}
我的问题的颜色是有关移动
:host {
background: blue;
display: block;
}
h1 {
color: yellow;
}
在之外标签并到一个单独的文件
相同的答案为聚合物,用[CSS变量(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)。它们是规范的一部分,至少有3个浏览器。它们不是聚合物所特有的。 –
的可能的复制[如何使用样式风格外聚合物定制元素的内部元素?](https://stackoverflow.com/questions/42756301/how-to-style-inner-elements-of-custom-polymer-element-使用-外部样式) –
CSS属性真的不是我要做的,以及如提到的我不使用聚合物 – AlexB