Overview

ShadowComponent is a base class that extends LitElement and provides automatic shadow DOM encapsulation with Kempo CSS stylesheet injection. Use this when you want your component to have:

• Shadow DOM for style encapsulation
• Automatic access to Kempo CSS styles
• Scoped component-specific styles

Most Kempo UI components extend ShadowComponent, including Dialog, Card, Accordion, and many others.

Basic Usage

Create a custom component by extending ShadowComponent:

import ShadowComponent from './ShadowComponent.js';
import { html } from '../lit-all.min.js';

export default class MyComponent extends ShadowComponent {
  render() {
    return html`
      <div class="p b r">
        <h3>My Component</h3>
        <p>This has shadow DOM with Kempo CSS styles.</p>
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

Custom Styles

Add component-specific styles using the static styles property:

import ShadowComponent from './ShadowComponent.js';
import { html, css } from '../lit-all.min.js';

export default class MyStyledComponent extends ShadowComponent {
  static styles = css`
    :host {
      display: block;
      padding: var(--spacer);
    }
    .custom-element {
      background-color: var(--c_primary);
      color: var(--tc_on_primary);
      border-radius: var(--radius);
    }
  `;

  render() {
    return html`
      <div class="custom-element p">
        Custom styled content
      </div>
    `;
  }
}

Changing Stylesheet Path

By default, ShadowComponent loads /kempo.min.css. Change this globally by setting the kempo.pathToStylesheet config before any components are loaded:

<script>
  window.kempo = {
    pathToStylesheet: '/custom-path/kempo.min.css'
  };
</script>

JavaScript Reference

Constructor

Extends LitElement

new ShadowComponent()

Creates a new ShadowComponent instance with shadow DOM and automatic Kempo CSS stylesheet injection.

Requirements

• Lit (LitElement)

Static Properties

pathToStylesheet: string

The path to the Kempo CSS stylesheet to inject into the shadow DOM. Default is '/kempo.min.css'. This is configured via the global window.kempo.pathToStylesheet config object.

Methods

createRenderRoot(): Element

Creates the shadow root and injects the Kempo CSS stylesheet. This method:

• Attaches a shadow DOM with mode: 'open'
• Injects a <link> element pointing to the Kempo CSS stylesheet
• Injects component-specific styles from the static styles property if defined
• Creates a render container with display: contents for layout transparency

childrenUpdated(): void

A custom lifecycle callback that is automatically triggered whenever a child element is added or removed from the component. After this callback returns, requestUpdate() is automatically called to trigger a re-render.

Override this method to react to child changes:

export default class MyComponent extends ShadowComponent {
  childrenUpdated() {
    console.log('Children changed!');
    this.validateChildren();
  }
}