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}
        `;
    }
}
customElements.define('hello-world',HelloWorld);    

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


<!DOCTYPE html>
<html>
<body>
    <hello-world></hello-world>
    <script src="HelloWorld.js"></script>
</body>
</html>    

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 effectiveweb.training (online).


Web Apps, SPA, PWA with vanilla Java Script (ES 6+), CSS 3 and WebStandards only. As simple as possible, but not simpler. See you at: (Progressive) Web apps, Single Page Apps and WebStandards airhacks workshops at MUC airport, Winter Edition

airhacks.fm the podcast:

Stay in touch: airhacks.news.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
Online Workshops
realworldpatterns.com
...the last 150 posts
...the last 10 comments
License