是否可以停止从 HTML 标签继承 shadowDom 中的 CSS？

Question

我正在注入一些 Javascript，在 body 的顶部创建一个孤立的 div。在这个 div 中有一个 shadowDom 元素。我选择 shadowDom 的原因是因为我认为它可以阻止 CSS 渗透到 shadowDom 中的所有 div。但是我可以清楚地看到它是从标签中继承样式的(font-size: 62.5%;)。这导致我的文本变小。我可以通过添加 font-size: 100% !Important 来覆盖它，但即使它在检查器工具中将其划掉，它实际上并没有改变。我可以让它工作的唯一方法是取消选中 CSS 部分中的框。

请帮忙

谢谢，

开发乔

HTML Shadow Dom IMAGE

CSS Checked IMAGE

CSS Unchecked IMAGE

Answer 1

不需要影子dom，只需要使用all属性来禁用继承。

#myElement {
  all: initial;
}

Answer 2

您不应使用相对字体大小（如 100%），因为它适用于继承的大小...所以这不会有任何效果。

Insead，你应该给 :host CSS peudo-class:

定义一个规则

:host {
   font-size: initial ;
}

注意：仅当容器（主文档）中定义的 font-size 直接应用于宿主元素时，您才需要添加 !important。

注意 #2：您可以使用 all: initial 代替，但不能将其与 !important 结合使用。

host.attachShadow( { mode: 'open' } )
    .innerHTML = `
      <style>
        :host { all: initial }
      </style>
      Inside Shadow Root <br>
      <div>Div in Shadow DOM</div>
      <slot></slot>
    `

body { font-size : 62.5% ; color: red }

Small Font
<div>Div in main Document</div>
<div id=host>Light DOM</div>

是否可以停止从 HTML 标签继承 shadowDom 中的 CSS？

Is it possible to stop inheriting CSS within shadowDom from HTML tag?

html

javascript

css

web-component

shadow-dom