Writing an Advanced Web Component: Slots


placeholder

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

Accepting user HTML with slots

Let’s jump back to the checkbox example that we’ve been working on. If you’ve been playing with it, you’ll notice that it’s not very useful, since there’s no way to update the label. This renders the checkbox practically useless since the consumer has no way to communicate to end users what the checkbox is for.

We could allow consumers to set the value via an attribute, which would work well for simple text content, but it’s very handy to be able to handle all sorts of HTML content.

We can achieve this by using the <slot> element. Component authors like us can declare placeholders within a template. Consumers can then pass through custom markup to the component which then r