如何避免跨多个 Web 组件重复 CSS 属性

Question

我正在使用没有任何第 3 方框架的 Web 组件进行构建。

而且我的几个组件中有 vanilla <button>，在对它们进行自定义样式之前我必须重置它们中的每一个，因为在根级别重置它一次是行不通的，因为涉及的属性不是穿透阴影的可继承样式之一 dom:

button {
   appearance: none;
   background: none;
   border: none;
   ...
}

你们认为目前最好的、得到广泛支持的避免这种重复的方法是什么？

我查看了 Constructable Stylesheets，但我的主要浏览器 Firefox 对它的支持很差。我还考虑了 CSS 自定义属性，但这仍然会导致到处重复 background、border 等属性，对吗？

Answer 1

但是如果我用 reactjs 说 tailwind css。 Reactjs 专为消除重复而设计。请检查 tailwind 文档，您甚至可以在其中为任何内容分配自定义 css 函数。

Answer 2

可构建的样式表旨在解决您遇到的这个问题。

已有 experimental support for constructable stylesheets in Firefox since version 73 (Feb. 2020)。不知道为什么它已经超过 2 年没有离开实验性功能状态了。

您可以通过在 about:config 中将 layout.css.constructable-stylesheets.enabled 设置为 true 来启用它。

直到它不再是实验性的，你可以使用 polyfill。

下一个可以帮助您减少冗余的东西叫做 CSS Module Scripts。来自该页面：

Deduplication: if the same CSS file is imported from multiple places in an application, it will still only be fetched, instantiated, and parsed a single time.

不幸的是，它还没有登陆 Firefox（见此 tracking bug), but already in the specification。

如何避免跨多个 Web 组件重复 CSS 属性

How to avoid repetition of CSS properties across multiple Web Components

html

javascript

css

web-component

shadow-dom