Style Web Components via Attributes or Custom Styles

Question

I have a web component my-icon. The component wraps an icon-font and some "business related" ui-logic to choose the correct icon by the given name:

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

The user can also decide which size and color the icon should have. What is the right way to provide this functionality?

• Custom styles --my-icon-color and --my-icon-size
• Properties + Attributes for color and size
• Both

Currently I provide both, but I'm not sure if it's a good practice to "style" a component via attributes and properties. On the other hand it may ease the use of the component (e.g. change the color via Data-Binding).

Thank you

Answer 1

There is no best practice, there are multiple ways to style shadowDOM, which one you use is up to you.

ShadowDOM is styled by:

• <style> within shadowDOM

• Inheritable styles
  https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

• (cascading) CSS properties

• shadowParts (and Themes)
  https://meowni.ca/posts/part-theme-explainer/

• <slot> are reflected, they are NOT styled by the shadowDOM, but by its container.
  See: ::slotted content

• (feb 2022) Constructible StyleSheets is still a Chromium only party
  https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

• your custom directive