Javascript 有没有办法编辑WebComponent的CSS/JS？

我是一名web开发人员，最近开始使用基于web组件的Ionic 4。我试图编辑组件的CSS，但我无法编辑相同的CSS，后来发现这是因为Web组件确实有#shadow root

我的问题是，有没有办法编辑Web组件的CSS和JS。 如果没有，为什么会有

根据我的说法，同样的方法的缺点是： -无法将自定义CSS应用到组件的子组件中。 -像触控笔这样的插件将毫无用处，因为CSS将不会被应用，我们将无法获得黑暗模式。

组件作者决定可以应用的样式级别

否

#阴影根

• 应用所有全局CSS
• 所有子项都是主文档DOM的一部分

用

this.attachShadow（{mode:“open”}）创建的阴影域

• 没有应用全局CSS
• 应用CSS属性（如果组件作者使用）
• 您可以访问

  shadowRoot

  并覆盖其中的所有内容
  （这就像买了一张宜家的桌子，然后把一把锯子放进去）

用

this.attachShadow（{mode:“closed”}）创建的阴影域

• 没有应用全局CSS
• 应用CSS属性（如果组件作者使用）
• 您可以不访问

  shadowRoot

文档 资料来源：

TL；DR

ShadowDOM消除了构建web应用程序的脆弱性。这个 脆性来自HTML、CSS和JS的全局性。结束 这些年来，我们发明了一种昂贵的 问题。例如，当您使用新的HTML id/类时，没有 告知它是否与页面使用的现有名称冲突。 慢慢地，CSS的特殊性成为一个巨大的问题（！重要 所有的事情！），样式选择器变得失控，并且。这个名单还有很多

阴影DOM修复CSS和DOM。它将范围样式引入web 站台。如果没有工具或命名约定，您可以将CSS与 标记，隐藏实现细节，
并编写了香草JavaScript中的自包含组件

阅读有关设置组件样式的所有信息：

• （尚未成为标准）

组件作者决定可应用的样式级别

否

#阴影根

• 应用所有全局CSS
• 所有子项都是主文档DOM的一部分

用

this.attachShadow（{mode:“open”}）创建的阴影域

• 没有应用全局CSS
• 应用CSS属性（如果组件作者使用）
• 您可以访问

  shadowRoot

  并覆盖其中的所有内容
  （这就像买了一张宜家的桌子，然后把一把锯子放进去）

用

this.attachShadow（{mode:“closed”}）创建的阴影域

• 没有应用全局CSS
• 应用CSS属性（如果组件作者使用）
• 您可以不访问

  shadowRoot

文档 资料来源：

TL；DR

ShadowDOM消除了构建web应用程序的脆弱性。这个 脆性来自HTML、CSS和JS的全局性。结束 这些年来，我们发明了一种昂贵的 问题。例如，当您使用新的HTML id/类时，没有 告知它是否与页面使用的现有名称冲突。 慢慢地，CSS的特殊性成为一个巨大的问题（！重要 所有的事情！），样式选择器变得失控，并且。这个名单还有很多

阴影DOM修复CSS和DOM。它将范围样式引入web 站台。如果没有工具或命名约定，您可以将CSS与 标记，隐藏实现细节，
并编写了香草JavaScript中的自包含组件

阅读有关设置组件样式的所有信息：

• （尚未成为标准）