阴影根元素中的样式

由于样式的隔离是Shadow DOM的功能，因此无法定义将在Shadow DOM范围中应用的全局CSS规则。

CSS变量可能是可行的，但应在阴影组件中显式实现（这不是第三方库的情况）。

一种解决方法是直接在阴影DOM中插入样式线。

//host is the element that holds the shadow root:var style = document.createElement( 'style' )style.innerHTML = '.the-class-name { property-name: my-value; }'host.shadowRoot.appendChild( style )

注意：只有将Shadow DOM

mode

'open'

Chrome 73+和Opera 60+的2019更新

现在可以直接实例化CSSStyleSheet对象，并将其影响到Shadow DOM或文档：

var sheet = new CSSStyleSheetsheet.replaceSync( `.color { color: pink }`)host.shadowRoot.adoptedStyleSheets = [ sheet ]