如何解决Web App 的单一全局 CSS，无需额外导入，无需导出部分
在仔细阅读了许多网站上的所有相关文章和帖子后，还有一个问题：我能否为一个使用 Web 组件构建的 Web 应用程序提供一个单一的、可交换的 CSS处理 W3C 建议的所有奇怪的东西？
我知道使用 ::part( something ) 和 exportparts="something" 来访问嵌套组件，但这不会沿树而下，所以我必须为几乎每个元素添加一个 part 属性，这使我的 HTML 完全膨胀。
在每个组件中都有一个 @import 规则也不是一个好的选择，因为每个样式表都会多一个 HTTP 请求。另外，一旦加载到模板中，importet css 就不能轻易更换。
W3C 通过移除 /deep/ 和 ::shadow 确实让我们的生活变得更加艰难。我知道，性能问题，等等，等等，但至少这很有效。
我认为不切实际的可能解决方案：
- How to style slotted parts from the parent downwards
- ::slotted CSS selector for nested children in shadowDOM slot
- How to access elements inner two shadow dom
示例 HTML，其中所有嵌套元素都可以使用全局 CSS 设置样式：
<body>
<o-app>
#shadowDOM
<o-header exportparts="username:o-textinput__username,action-ok:o-action__action-ok,o-action__label" part="o-header">
#shadowDOM
<o-texinput part="username">
<o-action exportparts="label:o-action__label" part="action-ok">
#shadowDOM
<div part="label">
然后我终于可以通过选择它来设置标签 div 的样式：
::part( o-action__label ) {}
现在告诉我，必须在父元素中指定所有后代元素的每个部分并不是一团糟！
Codepen 上的游戏：https://codepen.io/5180/pen/jOyQNYq?editors=1111
解决方法
现在在 2021 年，我宁愿只使用 light DOM，而不是强迫 shadow DOM 表现得像它的对应物，因为目前没有简单的方法可以穿透人工边界。它在规范中 - ::shadow 和 /deep/ - 但被删除了，所以处理它。 ::theme() 还没有准备好，正如我在示例中指出的那样，::part() 选择器对于深度样式毫无用处。
只需使用自定义元素的轻量级 DOM (innerHTML) 即可避免深度样式/主题问题。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。