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

【问题标题】：Is there any way to edit CSS/JS of WebComponent?有没有办法编辑 WebComponent 的 CSS/JS？
【发布时间】：2020-02-24 20:18:16
【问题描述】：

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

我的问题是，有什么方法可以编辑 Web 组件的 CSS 和 JS。如果没有，为什么会出现？

在我看来，同样的缺点是： - 无法将自定义 CSS 应用到组件的子组件中。 - 像 Stylus 这样的插件将毫无用处，因为不会应用 CSS，我们将无法获得暗模式。

【问题讨论】：

标签： javascript css ionic4 web-component native-web-component

【解决方案1】：

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

没有#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/class 时，没有告诉它是否会与页面使用的现有名称冲突。 Subtle bugs 爬起来，CSS 特异性成为一个大问题（！重要所有的东西！），样式选择器失控，performance can suffer。名单还在继续。

Shadow DOM 修复 CSS 和 DOM。它将范围样式引入网络平台。无需工具或命名约定，您就可以将 CSS 与标记，隐藏实现细节，
并在 vanilla JavaScript 中编写自包含组件。

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

【讨论】：