Web Component Builder

Configuration

Tag Name (requires hyphen)

Use Shadow DOM

Attributes (Props)

No attributes defined.

Markup & Styles

HTML Template Slots supported

<div class="card">
    <h2>Hello, <span id="name-display">World</span>!</h2>
    <slot name="description">Default description slot content</slot>
    <slot></slot>
</div>

CSS Styles Scoped via Shadow

:host {
    display: block;
    font-family: sans-serif;
    padding: 16px;
    background: #1e293b;
    color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #334155;
}
h2 {
    margin-top: 0;
    color: #38bdf8;
}
::slotted(*) {
    color: #94a3b8;
}

Live Preview

Generated Class

class MyElement...