Open Wc Webcomponent Basics#
Working through this CodeLab
Defining web components#
Start with a definition of web-components
Custom elements#
The method by which use and define a web components
Use by definining a new tag e.g. <cool-element></cool-element>
. Question It seems all lower case with dashes for spaces is the naming approach.
Define by creating a class that extends HTMLElement
class and use customeElements.define
to connect the class and the tag.
Customising our element#
The custom element inherits all the standard HTML element properties, methods (e.g. event listeners)
There are associate lifecyle callbacks
connectedCallback
- when the element is connected to the page, including with drag & drop operationsdisconnectedCallback
- the opposite
Templating#
Browser provides a <template>
element to enable definition and efficient cloning of HTML. lit-html and lit-element are high level methods for using this.
Shadow DOM#
Method of encapsulating what happens within web component elements. What's inside doesn't leak in or out to the DOM.