Light DOM vs Shadow DOM: how do I switch a component between them?

[mladaniOracle]

Does WebJs support both light DOM and shadow DOM for components? If so, how do I make a specific component use one or the other?

A quick example would help.

[vivek7405]

Yes, both are supported. Every component renders light DOM by default, and you opt a specific component into shadow DOM with one static field:

class Card extends WebComponent({ title: String }) {
  static shadow = true;      // this component now renders shadow DOM
  static styles = css`
    :host { display: block; }
    .body { padding: 1rem; }
  `;
  render() {
    return html`<div class="body"><h3>${this.title}</h3><slot></slot></div>`;
  }
}
Card.register('my-card');

Drop the static shadow = true line (or set it to false) and the same component renders light DOM instead. That is the whole switch, it is per component, and works either way.

Which one to reach for:

• Light DOM (the default) is what you want most of the time. Global CSS and Tailwind utilities apply directly to the component's markup, so it composes into the page the way a plain element does. If you write custom CSS for a light-DOM component, prefix every class selector with the tag name (my-card .body { ... }), since those styles are not scoped for you. Prefer Tailwind and you rarely hit that.
• Shadow DOM (static shadow = true) is for when you genuinely want encapsulation: scoped static styles = css... that can't leak or be leaked into, and isolation from third-party CSS. Set the host's display in static styles with :host { display: block }`, because shadow hosts are not auto-marked the way light-DOM hosts are. By default web components are displayed inline (display: inline), so webjs automatically makes all light dom components display: block, but you need to manually do that in shadow dom components.

Both modes SSR correctly, shadow DOM via Declarative Shadow DOM, so first paint is real HTML in either case.

Rule of thumb: stay in light DOM unless you specifically need style encapsulation, then flip that one component to shadow.