<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <custom-element></custom-element>

        <script src="/dist/index.js"></script>
        <script>
            // TODO: make a better demo!

            const def = {
                props: {
                    prop: {
                        attr: 'prop-attr',
                        init: 'example default',
                    },
                },

                methods: {
                    whoami() {
                        console.log('I am a custom-element and I have a prop =', this.prop);
                    },
                },

                template: 'I am a custom element',
                shadowDom: true,

                ready() {
                    console.log('Hello from the ready function');
                },
            };

            const CustomElement = makeElement(def);
            customElements.define('custom-element', CustomElement);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <counter-element></counter-element>

        <script src="/dist/index.js"></script>
        <script>
        const CounterElement = makeElement({
            props: {
                counter: {
                    init: 1,
                    set(counter) {
                        console.log('counter: setting counter text content');
                        this.$['counter'].textContent = counter;
                    },
                },
            },

            methods: {
                increment() {
                    console.log('counter: incrementing counter by 1');
                    ++this.counter;
                },
            },

            ready() {
                console.log('counter: setting click listener');
                this.$['increment-button'].onclick = () => { this.increment() };
            },

            shadowDom: true,
            template: `
                <div id="counter"></div>
                <button id="increment-button">Increment</button>
            `,
        });

        customElements.define('counter-element', CounterElement);
        </script>
    </body>
</html>

Update demo code to a counter component
Update demo code to a counter component
