43 custom elements that use your stylesheet instead of their own.

Load them four ways

Pick the one that matches the project you already have. The first needs no tooling at all, which is the point of this port.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  --> <link rel=stylesheet href="design-tokens/engine.css">
  <link rel=stylesheet href="styles/components.css">
  <script src="styles/mue.js" defer></script>
  --> <script type="module" src="frameworks/web-components/index.js"></script>
</head>
<body class="page">
  <mue-button variant="primary">Save changes</mue-button>
  <mue-input label="Email" type="email" name="email"
            helper="Never shared with third parties."></mue-input>
  <mue-card variant="elevated">
    <div class="card-body">…</div>
  </mue-card>
</body>
</html>

// every element, registered on import
import "./frameworks/web-components/index.js";

// or one element only, so the other 39 modules never reach the bundle
import "./frameworks/web-components/components/mue-dialog.js";

// loading index.js twice is harmless:
// every module guards with customElements.get(tag) before defining.

// the two stylesheets are still yours to import
import "./design-tokens/engine.css";
import "./styles/components.css";

$ node tools/mue.js add btn-buttons --framework web-components --into ../demo-app --create
added 1 web-components binding(s) into ../demo-app
btn-buttons — Buttons (stable)
  frameworks/web-components/components/mue-button.js  [written]
  install: <script type="module" src="frameworks/web-components/index.js"></script>
  import:  import "./frameworks/web-components/index.js" (registers every mue-* tag)
  tag:     <mue-button>
  verified: … (full line printed; quoted on the agent guide)

package files: 3 — 15 shared layer file(s) (15 written)

NOTES
  · web-components/index.js was written with 39 module reference(s) left out —
    those components are not in this install.

$ npm i file:./frameworks/web-components
$ node -e "import('mue-web-components')"

works, but reads the folder in place.

The file: install is the weakest of the four: it registers mue-web-components as a link to the folder inside the checkout rather than a copy, so deleting or moving the repository breaks the import. It is also not a published package — npm i mue-web-components will fail, because nothing has been published. The CLI page explains why this project installs files instead of resolving a registry.

What an element actually renders

Dumped from the browser after the modules registered, not written by hand. This is the contract: the host builds real child nodes out of the classes in styles/components.css, and the theme sheet sees them because they are in the document.

<mue-button variant="primary"><button type="button" class="btn-primary">Save changes</button></mue-button>

<mue-input label="Email" type="email" name="email" helper="…"><div class="field">
  <label class="field-label" for="mue-input-1">Email</label>
  <input id="mue-input-1" type="email" placeholder="" name="email">
  <p class="field-helper" id="mue-input-1-helper">Never shared with third parties.</p>
</div></mue-input>

<mue-card variant="elevated" class="card card-elevated">…</mue-card>

The gallery, live in your browser

This is frameworks/web-components/preview/gallery.html from the repository, running in the frame below. Switch theme with the toggle in the header and the elements inside the frame repaint — they are reading the same document-level rules as the rest of the site.

The same elements are also listed in the searchable library; /preview?id=… opens any catalog entry with the source panel beside it.

Element reference

All 43 registered tags, read out of the 40 modules in frameworks/web-components/components/. Two modules ship more than one tag: mue-sidebar.js registers three and mue-guidance.js registers two. “slot children” means the element expects you to write its inner markup; the classes it looks for are in the gallery.

Attribute and event lists were read out of the 40 modules in frameworks/web-components/components/; the “Module” column names the file, so any row can be checked in seconds. The Catalog entry column comes from frameworks/registry.json, which points each catalog id at one web-components source file: 36 of the 43 tags are named that way, the other 7 (mue-accordion-item, mue-avatar, mue-avatar-group, mue-radio-group, mue-tab, mue-tabpanel, mue-textarea) are registered and shown in the gallery but no catalog entry points at their file. Those links open the vanilla preview page, so its source panel prints HTML rather than a mue-* tag — the gallery above is where the element form is shown.

The 11 events

Every event is a CustomEvent that bubbles from the host, so one listener on a container is enough. Names are prefixed because a bare change would collide with the native event on the <input> inside.

What was run to say any of this

A throwaway project holding nothing but the output of mue add --framework web-components, served over http://127.0.0.1 and driven in headless Chrome. Twelve assertions, twelve passes, re-run the same day this page was written.

Plus the wider pass that backs the stable label: every preview page built and rendered in Chrome and Edge at 1280px and 390px in light and dark, with axe-core runs over the same pages. See docs/framework-support.md for the full statement.

What this page does not claim