#root
View Compiled

const { wire, bind, Component } = hyperHTML;

// Using html as the function to get the syntax highlighting available for litHTML
const html = (...props) => wire()(...props);

class HyperComponent extends Component {
    list = [ 'Eggs', 'Milk', 'Bread' ];
	styles = {
		list: {
			padding: '1em',
			border: '1px solid #ccc',
		}
	};
    render() {
        const {html} = this;
        return html`
            <div style=${this.styles.list}>
                <div>My HyperHTML ToBuy List</div>
                <ul>
                    ${this.list.map(item => wire({ item })`
                        <li>${item}</li>
                    `)}
                </ul>
            </div>
        `;
    }
}

const HelloWorld = ({ message }) => html`
    <div>
        <div>${message}</div>
        ${new HyperComponent()}
    </div>
`;

bind(document.getElementById('root'))`${HelloWorld({ message: 'Hello World' })}`;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/hyperhtml@latest/min.js