Web Components & Templates

7. Security and Accessibility

• Use safe DOM methods when rendering untrusted content.
• Give controls accessible names and meaningful semantics.
• Do not assume Shadow DOM makes a component secure.
• Ensure keyboard interaction works correctly.
• Consider form participation and browser support when building advanced custom controls.

Common Mistakes

• Forgetting the hyphen in a custom element name.
• Registering the same custom element name more than once.
• Assuming template content appears automatically.
• Inserting untrusted content into innerHTML.
• Assuming Shadow DOM automatically provides accessibility.

Practice Exercises

1. Create a course card template and clone it with JavaScript.
2. Build a custom element called student-card.
3. Add a title attribute to a custom element and display its value.
4. Create a component with an open Shadow DOM root.
5. Build a component with a named title slot and a default slot.

Revision Quiz

1. Does template content render immediately by default?
2. What character pattern is required in a custom element name?
3. Which method registers a custom element?
4. Which method creates a Shadow DOM root?
5. What is the purpose of a slot?
6. Does Shadow DOM provide a security boundary?

Answer Key and Explanations

1. No. Template content is inert until it is used, commonly by cloning it.
2. A hyphen — Valid custom element names contain a hyphen.
3. customElements.define() — It registers the custom element name and constructor.
4. attachShadow() — It attaches a Shadow DOM root to a supported host element.
5. To display supplied content at an insertion point — Slots support component composition.
6. No. Shadow DOM encapsulates structure and styling; it does not make content secure against malicious code.