jj
    Preparing search index...

    Class ShadowMaster

    Manages the resolution of Shadow DOM configuration (template and styles).

    Allows building up the configuration and resolving it lazily.

    const sm = ShadowMaster.create()
      .setTemplate('<div>Hello World</div>')
      .addStyles('div { color: red; }')

    class MyComponent extends HTMLElement {
      async connectedCallback() {
         // Resolves the config once and caches it
         const shadowConfig = await sm.getResolved()
         // ... init shadow root with shadowConfig
      }
    }
    Index

    Constructors

    constructor

    Methods

    addStyles getResolved setTemplate create

    Constructors

    Methods

    • Adds one or more style configurations.

      Parameters

      • ...stylesConfig: JJStyleConfig[]

        Variable number of style configurations.

      Returns this

      The instance for chaining.

      sm.addStyles(
          'p { color: red; }',
          fetchCss('./styles.css'),
          () => fetchCss('../lazy-loaded-styles.css'),
      )

    • Resolves the configuration to something that can be fed to JJHE.initShadow() function

      The result is cached, so subsequent calls return the same promise. Note: Any changes made to the ShadowMaster instance (via setTemplate/addStyles) after the first call to getResolved() will be ignored.

      Returns Promise<ShadowConfig>

      A promise resolving to the ShadowConfig.

    • Sets the template configuration.

      Parameters

      Returns this

      The instance for chaining.

      // Accepts string, promise, or fetchHtml result
      sm.setTemplate(fetchHtml('./template.html'))

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods