custom element demo with lit-html

custom-element-lit.js

    import {render, html} from 'lit-html.js';
    import {Styles} from 'styles.js';
    import '/component/rabbit-button.js'
    import '/component/rabbit-input.js'
    import '/component/search-grid.js'

    /**
     * Search field is a custom element that includes a
     * button and a text field. The component consumes
     * a search string and produces a list of search hits.
     *
     * The search hits are fed into the slotted component.
     */
    class SearchField extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: 'open'});
        }

        connectedCallback() {
            this.render();
        }

        get template() {
            // important: use the html tagged template function for rendering
            // this will only re-render parts that changed and escape output.
            return html`
                <style>
                    /* including css rules from another module. */
                    ${Styles.theme}
                </style>
                <div class="form-area">
                    <rabbit-input placeholder="search"></rabbit-input>
                    <rabbit-button @click="${this.query.bind(this)}">Submit</rabbit-button>
                </div>

                <div class="output-area" ?hidden="${!this.hits}">
                    <span class="hits">${this.hits.length}</span>
                    <search-grid .hits="${this.hits}"></search-grid>
                </div>
            `;
        }

        render() {
            render(this.template, this.shadowRoot)
        }

        query(query) {
            // queries are scoped to the shadow tree = smaller, faster and unpolluted.
            return this.shadowRoot.querySelector(query);
        }

        search() {
            let query = this.query('input').value;
            fetch(`/api/search?query=${query}`)
                .then(response => response.json())
                .then(json => {
                    this.hits = json;
                    this.render();
                })
                .catch(e => alert(e));
        }
    }