可通过 StencilJS / Web 组件重用样式

Question

我是 Web 组件的新手，我正在尝试了解 Web 组件中的可重用样式，特别是 StencilJS。作为一名开发人员，我天生很懒，不想考虑焦点状态、淡入淡出动画等。我想使用已经存在的东西，而不是重新发明轮子。

如果我理解正确的话，Stencil 主要用作框架独立组件的基础。因此，所有组件都需要相当多的样式。由于shadow DOM封装了样式，因此除了一些可以传递的CSS变量之外，每个组件基本上都是从头开始设计的（

globalStyles

不会渗透到shadow DOM中，并且

part()

选择器是它自己的主题）。

即使是像输入字段或按钮具有全局样式这样简单的事情也很难实现。我一直在考虑将 Tailwind CSS 添加到我的 Stencil 项目中，但遇到了一些困难。总而言之，在尝试添加外部 CSS 时，感觉我正在做一些不惯用的事情。似乎 Stencil/Web 组件不应该以这种方式设计，而我正在与潮流作斗争。

除了技术细节之外，应该如何考虑以可扩展的方式设计 Web 组件的样式？您如何在他们之间共享样式并避免自己创建冗长而复杂的样式？

我非常高兴对此提供任何帮助和意见！

Answer 1

解决方案的整体设计将完全取决于您的组件是否使用 Shadow DOM。但无论是哪种情况，“分享”的风格都是比较直接的。

Stencil 允许您将全局样式表作为库的一部分包含：https://stenciljs.com/docs/config#globalstyle。如果您使用的是 Shadow DOM，这相对来说用处不大。

使用 Shadow DOM 时共享样式可以通过 @stencil/sass 插件使用 SASS 轻松实现（参见 https://stenciljs.com/docs/plugins#stencil-plugins）。您可以通过 Stencil 配置文件包含一个“全局”SASS 文件 - 包含您决定使用的任何 SASS 功能，如 sass 变量、@mixin、@use、@extend 等，然后您可以在任何组件中使用任何 SASS SASS 样式文件。例如：

    plugins: [
        sass({
            injectGlobalPaths: [
                'src/global/_library-core.scss',
                'node_modules/some-sass-package/_main.scss'
            ]
        })
    ],

另一种选择是使用 CSS 自定义属性，可以在库的全局样式表中定义这些属性。这可以单独完成，也可以与 SASS 结合完成。自定义属性通常用作允许外部样式配置（例如全局主题）的解决方案，而不是用于库内“共享”样式，但这也是一个有效的选择。

您还可以坚持使用纯 CSS 并使用 @import 从项目中引入共享 CSS 文件。例如，您可以为共享文件“common_input.css”中的所有元素定义样式，并在必要时将其@import到组件样式表中。这种方法可能比 SASS 方法更难成功，而且灵活性较差。