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

Question

我注入了一些Javascript，这些JavaScript创建了位于正文顶部的隔离div。在此div中，有一个shadowDom元素。我使用shadowDom的原因是因为我认为它阻止了CSS渗入shadowDom中的所有div。但是我可以清楚地看到它是从标记继承的样式（字体大小：62.5％；）。这导致我的文字变小。我可以通过添加font-size：100％来覆盖它！使它起作用的唯一方法是取消选中CSS部分中的复选框。

请帮助

谢谢，

Dev Joe

HTML Shadow Dom IMAGE

CSS Checked IMAGE

CSS Unchecked IMAGE

Answer 1

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

#myElement {
  all: initial;
}

Answer 2

您不应该使用相对字体大小（例如100%），因为它适用于继承的字体大小，因此不会起作用。

Insead，您应该为:host CSS伪类定义规则：

:host {
   font-size: initial ;
}

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

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