HTML/CSS or Web Component? Shadow or Light DOM? Slot or internal content? Some thoughts

[gfellerph]

HTML/CSS component vs. web component

HTML/CSS

• Broadly usable, also in quirky situations
• No overhead
• Easy to implement and maintain

• Big API surface, changes are quickly breaking, sometimes deep nesting with specific classes needed
• Very limited functionality possible, often only with workarounds
• No possibility to deliver typings for possible custom attributes/values

Web Components

• Abstraction over DOM structure, low API surface, easier to ship improvements without breaking changes
• Possible to provide typings
• Easy to add functionality and state

• Hard to implement, especially form controls
• Integration has some limitations and quirks, SSR is not given, framework specific wrappers are necessary for good DX

Recommendation: Use standard elements if it's possible to build the component with one element (<a>, <p>, <h1>). Use a custom element when JS functionality is necessary (<post-accordion>, <post-tabs>), when a specific structure is necessary (<post-input>, <post-input floating-label>) or there is no standard element for the use case (<post-tag>). Exceptions or edge cases are possibly a <button> with icon where it's hard to implement a button with all necessary variations and compatibility as web component but a specific nesting structure is necessary.

Shadow vs. Light DOM

Light DOM

• Easy styling options for complicated cases with :has()
• Better compatibility for third party libraries (popover-polyfill)

• No style encapsulation
• Custom stencil solution for handling slots, creates a critical dependency on the library and is not using standards

Shadow DOM

• Standard slots functionality
  +- Full style encapsulation

Recommendation: Use light DOM when it's necessary to style the component based on slotted elements or for compatibility reasons with third party libraries, use Shadow DOM otherwise.

Slots or internal content?

Slots

• Leave control over elements to the owner, especially helpful for interactive elements which are hard to abstract
• Composability, prevents overloading one component with feature creep

• No styling options for deeply nested slotted elements
• Slotted elements can change and event listeners and slotted elements have to be observed in order to be able to update state watchers
• Easy to break when slotting incompatible elements

Internal content

• Full control over the elements
• Robust

• Limited composability
• Difficult to replicate integration with native controls, especially with input fields and e.g. Angular double bindings

Recommendation: Use slots. Abstract away logic, but not content or semantic structure.

[gfellerph]

ChatGPT: convert to decision tree

[alizedebray]