我是一名web开发人员，最近开始使用基于web组件的Ionic 4。我试图编辑组件的CSS，但我无法编辑，后来发现这是因为Web组件确实有#影子根。
我的问题是，有什么方法可以编辑Web组件的CSS和JS吗。如果没有，为什么会在那里？
根据我的说法，同样的缺点是：-无法将自定义CSS应用到组件的子组件中。-像Stylus这样的插件将毫无用处，因为CSS不会被应用，我们也无法获得黑暗模式。
组件Author决定可以应用的样式级别。
无#shadow-root
- 应用了所有全局CSS
- 所有子项都是主文档DOM的一部分
使用this.attachShadow({mode:"open"})创建的ShadowDOM
- 未应用全局CSS
- 应用CSS属性(如果组件作者使用(
- 您可以访问
shadowRoot并覆盖
中的所有内容(这就像买了一张宜家桌子并在里面放了一把锯(
使用this.attachShadow({mode:"closed"})创建的shadowDOM
- 未应用全局CSS
- 应用CSS属性(如果组件作者使用(
- 您可以不访问
shadowRoot
文档
来源：https://developers.google.com/web/fundamentals/web-components/shadowdom
TL；DR
Shadow DOM消除了构建web应用程序的脆弱性。这个脆性来自于HTML、CSS和JS的全局性。结束多年来，我们发明了大量的工具来规避问题。例如，当您使用新的HTML id/类时告知它是否会与页面使用的现有名称冲突。微妙的错误悄悄出现，CSS的特殊性成为一个巨大的问题(！important所有的东西！(，样式选择器失控，性能可能会遭受痛苦。名单还在继续。
Shadow DOM修复了CSS和DOM。它将作用域样式引入web站台在没有工具或命名约定的情况下，您可以将CSS与标记、隐藏实现详细信息、
和编写普通JavaScript中的自包含组件。
阅读有关造型组件的全部信息：
-
https://developers.google.com/web/fundamentals/web-components/shadowdom#styling
-
(还不是标准(https://developers.google.com/web/updates/2019/02/constructable-stylesheets