有什么方法可以编辑WebComponent的CSS / JS？

Question

我是一名Web开发人员，最近开始使用基于Web Component的Ionic 4。我试图编辑组件的CSS，但无法对其进行编辑，后来又发现这是因为Web组件确实具有＃shadow-root。

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

根据我的说法，同样的缺点是： -无法将自定义CSS应用于Component的子组件。 -诸如Stylus之类的插件将无用，因为CSS不会被应用，我们将无法获得暗模式。

Answer 1

组件 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的全局性。过度 我们发明了number of tools来规避 问题。例如，当您使用新的HTML ID /类时，没有 告诉它是否与页面使用的现有名称冲突。 Subtle bugs逐渐流行，CSS的特殊性成为一个巨大的问题（！重要 一切！），样式选择器将失去控制，并且performance can suffer。列表继续。

阴影DOM修复了CSS和DOM 。它将作用域样式引入网络 平台。没有工具或命名约定，您可以将CSS与 标记，隐藏实现详细信息，
并使用香草JavaScript编写自包含组件。

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

• https://developers.google.com/web/fundamentals/web-components/shadowdom#styling

• （还不是标准）https://developers.google.com/web/updates/2019/02/constructable-stylesheets