Skip to content

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 operations
  • disconnectedCallback - 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.