The Simplest Possible Web Component (CustomElement)

A WebComponent (CustomElement) is an ES 6 class:

class HelloWorld extends HTMLElement { 
    connectedCallback() { 
        const message = "world";
        this.innerText = `
            hello, ${message}

which renders itself after including in a "html" page:

<!DOCTYPE html>
    <script src="HelloWorld.js"></script>

WebComponents are supported in all recent browsers.

See you at "Build to last" effectively progressive applications with webstandards only -- the "no frameworks, no migrations" approach, at Munich Airport, Terminal 2 or (online).


Post a Comment:
  • HTML Syntax: NOT allowed
...the last 150 posts
...the last 10 comments