Web Components Introduction


@thw@phpc.social

About Me

  • Application Developer
  • Programming >= 25 years
  • XML Fanatic
  • Casual Cyclist
My Brompton folding bicycle on the banks of the river Rhine.

My History

Overview

What?

  • Custom HTML elements
  • Shadow DOM

Why?

  • Standard browser api
  • No framework runtime
  • Small bootstrap
  • Framework independent

How?

  • Autonomous Custom Element

    <hello-world></hello-world>

  • Custom Built-In Elements

    <span is="hello-world"></span>

Can I Use?

  • 77.76% + 18.22% = 95.98%
  • Safari, only autonomous custom element
  • Polyfills!

Hello World

Registration

Define

Naming

  • start with an ASCII lowercase letter (a-z)
  • >= 1 hyphen
  • not contain any ASCII uppercase letters
  • not reserved name
"-" | "." | [0-9] | "_" | [a-z] | #xB7 | [#xC0-#xD6] |
[#xD8-#xF6] | [#xF8-#x37D] | [#x37F-#x1FFF] |
[#x200C-#x200D] | [#x203F-#x2040] | [#x2070-#x218F] |
[#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] |
[#xFDF0-#xFFFD] | [#x10000-#xEFFFF]

CustomElementRegistry

  • define(name, constructor)
  • get(name)
  • getName(constructor)
  • upgrade(root)
  • whenDefined(name)
      :not(:defined)

API

Class/Constructor

  • Extend HTMLElement
  • Call parent constructor
  • Restrictions!
    • No Attributes Write
      • No DataSet Write
      • No ClassList Write
    • No Global Event Listeners

Connected Callback

Disconnected Callback

AttributeChanged Callback

Styles

Slots

Templates

TypeScript

TypeScript

TypeScript

TypeScript

SCSS

WebPack / sass-to-string

Storybook

Tests

Jest + Jasmine

AutoComplete

Intellj Idea

https://github.com/JetBrains/web-types 
{"web-types": "./src/web-types.json"}

VS Code

https://github.com/microsoft/vscode-html-languageservice/blob/main/docs/customData.md 
{
  "tags": [
    {
      "name": "cui-hello",
      "description": "Target of an hello",
      "attributes": [
        { "name": "target" },
      ]
    }
  ]
}

Annotation

Thanks