@litsx/babel-plugin-transform-litsx-scoped-elements

Automatically wires the Litsx DOM mixins for LitElement classes so components can use locally registered custom elements through the shared static elements contract in shadow DOM.

What it does

• Finds JSX tags that correspond to imported components and rewrites them to kebab-case custom elements.
• Injects a static elements map with the detected components.
• Wraps shadow DOM components in ShadowDomMixin, which resolves elements through native or shimmed scoped custom element registries.
• Wraps static lightDom = true components in LightDomMixin only when they do not require scoped elements.
• Throws when a component combines light DOM authoring with static elements requirements.
• Adds the required @litsx/core/elements import only when a component needs a LitSX DOM mixin, keeping untouched classes minimal.
• Updates matching closing tags and leaves unrelated JSX nodes unchanged.
• Detects scoped usage inside html tagged template literals as well, ensuring templates converted by the JSX plugin still register components.

Install

npm install --save-dev @litsx/babel-plugin-transform-litsx-scoped-elements
# or
yarn add --dev @litsx/babel-plugin-transform-litsx-scoped-elements

Usage

{
  "plugins": ["@litsx/babel-plugin-transform-litsx-scoped-elements"]
}

Example

Input

import { LitElement, html } from "lit";
import FancyButton from "./FancyButton.js";

class MyElement extends LitElement {
  render() {
    return <FancyButton label="Click" />;
  }
}

Output (simplified)

import { ShadowDomMixin } from "@litsx/core/elements";
import { LitElement, html } from "lit";
import FancyButton from "./FancyButton.js";

class MyElement extends ShadowDomMixin(LitElement) {
  static elements = {
    "fancy-button": FancyButton,
  };

  render() {
    return html`<fancy-button label="Click"></fancy-button>`;
  }
}

Notes

• Imported and locally declared sibling components can both be collected into static elements.
• static lightDom = true is a root-mode choice, not a scoped-elements transport. If JSX analysis or authored static elements would require scoped element resolution, the transform fails with a diagnostic.
• Classes that already wrap the superclass with another mixin still work; the plugin nests the Litsx DOM mixin around the existing expression.
• The helper pairs nicely with other LitSX transforms such as the JSX-to-template and function-to-class plugins.