Shadow DOM Style Guide

Selectors

• ✅ DO use simple selectors and IDs

  <header>
    <slot name="header"></slot>
    <button id="close-button">x</button>
  </header>

• ✅ DO use class names for repeated elements or with classMap

  <header class=${classMap({ mobile, hasHeader })}>
    <slot name="header"></slot>
    <button id="close-button">x</button>
    <nav>${this.links.map(x => html`
      <a href=${x.href} class="header-link">${x.text}</a>`}
    </nav>
  </header>

• ❌ DON'T use class names, unless (a) for repeated elements or (b) with classMap (for performance)

  <header class="rh-jazz-hands__header>
    <slot name="header"></slot>
    <button class="rh-jazz-hands__header__btn__close______x__________sm-sm-lg-sm">x</button>
  </header>

Parts

• ✅ DO expose shadow parts for content containers

  <header part="header">
    <slot name="header">
  </header>

• ⚠️ AVOID exposing shadow parts for 'layout containers'

  <div id="container" part="container">
    <header part="header">
      <slot name="header">
    </header>
  </div>

Slot Names

• ✅ DO use "header" as a slot name

  <header part="header">
    <slot name="header">
  </header>

• ❌ DON'T use "heading" as a slot name

  <header part="heading">
    <slot name="heading">
  </header>