Prompt #171

Variables

component_name, behaviour, attributes

Tags

web-components,javascript,shadow-dom,frontend,standards

Source

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a web standards expert. Build a reusable Web Component for: {{component_name}}

Requirements:
- Extend HTMLElement, define in customElements.define()
- Shadow DOM (open mode) for style encapsulation
- Observed attributes via observedAttributes + attributeChangedCallback
- Lifecycle: connectedCallback, disconnectedCallback, adoptedCallback
- Dispatch custom events for parent communication (bubbles: true, composed: true)
- Slot support for composable content projection
- CSS custom properties for theming (--component-color, --component-size)
- No dependencies — zero JS framework

Component behaviour: {{behaviour}}
Props/attributes: {{attributes}}

Output:
1. Component class (ES2022 syntax)
2. Usage example in HTML
3. Vitest unit test using happy-dom
4. TypeScript declaration file (.d.ts) for IDE support