ignite-html/src/sheet.js

import { IgniteElement } from './ignite-element.js';
import { IgniteTemplate, div, html, list, a } from './ignite-template.js';

class Sheet extends IgniteElement {
    constructor() {
        super();

        this.show = false;
        this.items = [];
        this.href = "www.google.com";
    }

    properties() {
        return [
            "show",
            "name",
            "items",
            "href"
        ];
    }

    render() {
        return this.template
            .class(this.show)
            .child(
                new div(
                    new html("<h2>this is before</h2>"),
                    new list(this.items, (item) => {
                        return new html(`<h1>${item}</h1>`)
                    }),
                    new html("<h2>this is after</h2>"),
                    new a("this is a link").attribute("href", this.href)
                )
            );
    }
}

class SheetTemplate extends IgniteTemplate {
    constructor(...items) {
        super(items);

        this.tagName = "md-sheet";
    }
}

customElements.define("md-sheet", Sheet);

export { SheetTemplate as Sheet };