Custom elements give developers the ability to extend HTML and create their own tags. Because custom elements are standards based they benefit from the Web's built-in component model. The result is more modular code that can be reused in many different contexts.
connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed.
disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM.
adoptedCallback: Invoked each time the custom element is moved to a new document.
attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed.
observedAttributes: Array of attributes to observe
static get observedAttributes() {return ['w', 'l']; }All custom elements must have a hyphenated name e.g. todo-item, todo-list etc.
If you have a template like so
<header>
<slot></slot>
</header>
<div> ...You can use the custom element slot like so
<popup-message>This is my message</popup-message>The text inside of the custom element tag will be placed in the template slot tag
To learn more visit the Wiki page
Note that all the examples are not using a pollyfill
- Demo1
- Very basic component using slot
- Demo2
- Password toggle. Password input field can be accessed from custom element class
- Demo3
- Custom element when closed(click on the upper right corner) dispatches a custom event
- Demo4
- Score card being updated by an observed attribute
- Demo5 - Broken
- A simple todo list that starts by fetching a list then allows you to add your own. One custom element will take in data, the other will display it. A controller and service manage the state. The state is broken in this example due to the state management being done in the custom element
- Demo5 - Fixed
- Same as the broken demo, but fixed due to the state being managed by the service