DEV Community

JWP
JWP

Posted on • Edited on

Web Components

#tooling #vscode #discuss

A Simple Web Component's folder structure may look like this:
Web Component Folder Structure

The HTML file for the layout and the JS file to register the functionality.

Define a Custom Element

customElements.define('simple-custom', ...
Enter fullscreen mode Exit fullscreen mode

The reserved word customElements is a part of the CustomElementRegistry which is an interface in the DOM.

The define function can take multiple parameters:

define(name, constructor)
define(name, constructor, options)

This use of the define function gives the custom-element a name, and it defines the implementation of the class.

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();
...
Enter fullscreen mode Exit fullscreen mode

It is a class definition which extends an HTMLElement followed by a constructor which must call super() first.

Creating the HTML Content

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();
      const divElem = this.createHTMLContent();
Enter fullscreen mode Exit fullscreen mode 
    createHTMLContent() {
      const divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');
      return divElem;
    }
Enter fullscreen mode Exit fullscreen mode

Attaching a Shadow

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();
      const divElem = this.createHTMLContent();
      this.createShadow(divElem);
    }
Enter fullscreen mode Exit fullscreen mode 
    createShadow(divElem) {
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(divElem);
    }
Enter fullscreen mode Exit fullscreen mode

And the HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>:defined demo</title>
    <script src="main.js" defer></script>
    <style>
      p {
        background: yellow;
      }

      simple-custom {
        background: cyan;
      }

      :defined {
        font-style: italic;
      }

      simple-custom:not(:defined) {
        display: none;
      }

      simple-custom:defined {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1><code>:defined</code> demo</h1>

    <simple-custom text="Custom element example text"></simple-custom>

    <p>Standard paragraph example text</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Result

Top comments (0)