Basic Recipes
Fundamentals for building custom elements
-
class MyCe extends HTMLElement { }Basic
Minimal custom element.
-
const shadow = this.attachShadow({ mode: 'open' })Shadow DOM
Encapsulate styles with Shadow DOM.
-
<my-ce> <span>Hello, Slots!</span> </my-ce>Slots
Slot content into elements shadow DOM.
-
<my-ce> <span slot="top">I'm a top</span> <span slot="bottom">I'm a bottom</span> </my-ce>Named slots
Precisely slot content into elements shadow DOM.
-
get name() { }Properties
Expose properties on a custom element.
-
<my-ce name="Initial Name"></my-ce>Attributes
React to attribute changes on a custom element.
-
this.dispatchEvent(new CustomEvent('my-event', { detail: 'Hello, World!' }))Events
Emit custom events from your element.
Forms
Recipes for creating forms
Atoms
Small reusable elements
Have an idea for a recipe?
Send your idea so I can expand the cook book!