Make your own form element using Web Components

Who am I?

• Name: Sebastian Zartner
• Company: Webedia Gaming GmbH
• Contributions: Former Firebug contributor, Firefox contributor, invited expert of CSS Working Group
• Contact info: sebastian.zartner@webedia-group.com

Workshop overview

• Introduction to Web Components
• What are Form-Associated Custom Elements?
• Step-by-step development of a JSON editor
• Code on https://sebastianz.github.io/face/

Introduction to Web Components

• A set of technologies that allow you to create custom reusable and encapsulated HTML elements.
• Consist of:
  • Custom Elements
  • Shadow DOM
  • HTML Templates

Benefits of Web Components

• Reusability
• Encapsulation of HTML, CSS, and JavaScript
• Easy integration into any web application

What are Form-Associated Custom Elements (FACE)?

• Extend the functionality of Custom Elements.
• Can interact with HTML forms and work like native form elements.

Benefit

Participate in forms and form validation.

Requirements

Implementing form-associated callbacks and properties.

Let's create one!

Summary

• We learned what Web Components and Form-Associated Custom Elements are.
• We developed a simple JSON editor from scratch.
• We saw how the editor interacts with forms.

Resources

• MDN Web Components
• MDN HTMLElement
• HTML Living Standard: Custom Elements
• HTML Living Standard: Form-Associated Custom Elements