Video Tutorial Web Components

Web Components consist of several distinct technologies for creating custom and reusable GUI components that have been created using free web technologies. They are part of the browser, and therefore do not require external libraries like jQuery or Dojo. An existing Web Component can be used without writing code, by simply adding an import declaration to an HTML page. Web Components use new standard browser capabilities, or those under development.

Custom Element

The first part of the web component is the possibility to create custom HTML elements.

export default class SecondTimer extends HTMLElement {

  static get observedAttributes () {return ('prefix'); }

  constructor () {
    Great()
    this.i = 0
    this.span = document.createElement ('span')
    this.span.classList.add ( 'badge')
    this.span.classList.add ( 'badge secondary')
    this.span.innerHTML = this.i
    this. $ prefix = document.createElement ('span')
    this.appendChild (this. $ prefix)
    this.appendChild (this.span)
  }

  connectedCallback () {
    this.timer = window.setInterval (() => {
      this.i ++
      this.span.innerHTML = this.i
    }, 1000)
  }

  disconnectedCallback () {
    clearInterval (this.timer)
  }

  attributeChangedCallback (name, oldValue, newValue) {
    if (name === 'prefix' && oldValue! == newValue) {
      this. $ prefix.innerHTML = newValue + ":"
    }
  }

}

Once this element is declared it will be possible to use it to define a component.

customElements.define ('second-timer', SecondTimer)

Now it will be possible to use our HTML element

You can also declare an element that inherits from a native HTML element. For example if we want to convert a text field to datepicker simply:

export default class Datepicker extends HTMLInputElement {
  connectedCallback () {
    this.calendar = flatpickr (this)
  }

  disconnectedCallback () {
    this.calendar.destroy ()
  }

}

customElements.define ('date-picker', Datepicker, {extends: 'input'})

You can then use it on the fields using the attribute is

This second method can be useful for adding specific behaviors to certain elements without redefining a structure.

The shadow dom

An important aspect of the components is the ability to keep the structure, style and behavior isolated from the rest of the application. The Shadow DOM API allows you to attach a hidden DOM element to an element (here our component).

export default class MyButton extends HTMLElement {

  constructor () {
    Great()
    this.shadow = this.attachShadow ({mode: 'closed'})
    this.shadow.innerHTML = `

`
  }

}

The method Element.attachShadow () Creates a new DOM shadow tree and attaches it to the specified element. This tree will be isolated from the rest of the page, which means several things:

• The style of the page does not affect the elements in the DOM shadow tree.
• The style set in the shadow tree DOW does not affect the rest of the page.
• JavaScript can not access items inside the DOM tree if the tree was created with the mode closed.

You also have the possibility to use which allow to recover the elements inside the component.

This content will be injected into the slot

It is also possible to have several named slots

  
I would be injected into the slot with name = "header"
  
And me in the name = "body"!