Reusable Web Components Notes

Notes and perspectives from native developer

This is a poorly organized article with notes about web development. There is no well developed narrative or thread, but I am putting it here in case others find useful information.

This is simply an artifact of my journey towards developing a better understanding of GUI programming on the Web. My background is as a developer using native toolkits such as Cocoa, WinForms, Gtk and Qt.

My understanding is that CSS frameworks such as Bootstrap dominate in making GUI apps today. However the more modern Reusable Web Components allows development of GUI applications on the web in a fashion which is more familiar to a native GUI toolkit developer such as myself.

Googler Eric Bidelman, has a great overview of how this works here, so I will not try to repeat everything he says.

Instead I will try to point out some of my own stumbling blocks in trying to understand this stuff.

The Wrong Way And Why It Is Wrong

There naive way to do this if you have not reflected up on how this should work is to create a new reusable web component like this:

class Foobar extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = '<p>hello</p>'
    }
}

// Foobar becomes a custom HTML tag named <foo-bar>
// Name must have a hyphen (-), or it is illegal
customElements.define('foo-bar'…