有没有办法编辑WebComponent的CSS/JS？
我是一名web开发人员，最近开始使用基于Web组件的Ionic 4。我试图编辑组件的CSS，但我无法编辑相同的CSS，后来我发现这是因为Web组件确实有#shadow-root。
我的问题是，有没有办法编辑Web组件的CSS和JS。如果不是，为什么它会在那里？
根据我的说法，相同的缺点是：-不能将自定义CSS应用到组件的子组件中。-像Stylus这样的插件将是无用的，因为CSS将不会被应用，我们将无法获得暗模式。
回答 1
Stack Overflow用户
发布于 2020-02-25 16:42:08
Component Author决定可以应用的样式级别。
#shadow-root不支持no
- 所有全局CSS应用的
- 所有子文档都是主文档DOM
的一部分
使用this.attachShadow({mode:"open"}) this.attachShadow({mode:"open"})创建的ShadowDOM
- 不应用全局CSS
- 应用CSS属性(如果由组件作者使用)
- 您可以访问
shadowRoot并覆盖其中的所有内容
(这就像买了一张宜家的桌子，然后在里面放了一把锯子)
使用this.attachShadow({mode:"closed"}) this.attachShadow({mode:"closed"})创建的shadowDOM
- 未应用全局CSS
- CSS属性(如果由组件作者使用)已应用
- You can not access
文档
来源：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。它将作用域样式引入web平台。无需工具或命名约定，您就可以将CSS与标记捆绑在一起，隐藏实现细节，
并在vanilla JavaScript中编写自包含组件。
阅读有关设置组件样式的所有信息：
https://developers.google.com/web/updates/2019/02/constructable-stylesheets
- (尚未成为标准)
https://stackoverflow.com/questions/60383311
复制相似问题
腾讯云开发者
