0

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

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

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

4

1 回答 1

2

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

不#shadow-root

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

ShadowDOM 创建于this.attachShadow({mode:"open"})

  • 未应用全局 CSS
  • 应用 CSS 属性（如果组件作者使用）
  • 您可以访问shadowRoot并覆盖里面的所有内容
    （这就像买一张宜家桌子并在里面放一把锯子）

shadowDOM 创建于this.attachShadow({mode:"closed"})

  • 未应用全局 CSS
  • 应用 CSS 属性（如果组件作者使用）
  • 您无法访问shadowRoot

文档

来源：https ://developers.google.com/web/fundamentals/web-components/shadowdom

TL;博士

Shadow DOM 消除了构建 Web 应用程序的脆弱性。脆弱性来自 HTML、CSS 和 JS 的全局性。多年来，我们发明了大量的工具来规避这些问题。例如，当您使用新的 HTML id/class 时，不知道它是否会与页面使用的现有名称冲突。 细微的错误不断蔓延，CSS 特异性成为一个大问题（！对所有事情都很重要！），样式选择器失控，性能可能会受到影响。名单还在继续。

Shadow DOM 修复了 CSS 和 DOM。它将范围样式引入Web 平台。在没有工具或命名约定的情况下，您可以将CSS 与标记捆绑在一起，隐藏实现细节，
并在 vanilla JavaScript 中编写自包含组件。

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

于 2020-02-25T08:42:07.583 回答