通过属性或自定义样式设置 Web 组件样式

Question

我有一个网络组件my-icon。该组件包装了一个图标字体和一些“业务相关”的用户界面逻辑，以通过给定的名称选择正确的图标：

<my-icon name="arrow-left" />

用户还可以决定图标的大小和颜色。提供此功能的正确方法是什么？

• 自定义样式 --my-icon-color 和 --my-icon-size
• 颜色和大小的属性 + 属性
• 两者

目前我两者都提供，但我不确定通过属性和属性来“设计”组件是否是一种好习惯。另一方面，它可以简化组件的使用（例如通过数据绑定更改颜色）。

谢谢

Answer 1

没有最佳实践，有多种方式来设置 shadowDOM 的样式，由你决定使用哪一种。

ShadowDOM 的样式是：

• shadowDOM 中的<style>

• 可继承的样式
  https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

• （级联）CSS 属性

• shadowParts（和主题）
  https://meowni.ca/posts/part-theme-explainer/

• <slot> 被反射，它们的样式不是由 shadowDOM 设置的，而是由它的容器设置的。
  见：::slotted content

• （2022 年 2 月）Constructible StyleSheets 仍然是 Chromium 唯一的派对
  https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

• 你的自定义指令