Information

Custom Web Component

The Custom Web Component wrapper library is a single class, that is consumed by the CustomHTMLElement class; whilst we do not instantiate the Custom Web Component class directly, we do use it via the CustomHTMLElement class, which in turn extends the native HTMLElement class. Why do we do it this way? To get it closer to native, we use Custom Web Component to bolster the HTML standards.

At present we only extend HTMLElement, as 99% of the time you want to create generic components, in time we may offer extensions of other elements such as HTMLButtonElement or HTMLAnchorElement. This approach allows us to create custom versions of the HTML elements by extending the custom versions of these classes by prefixing with 'Custom'. The CustomHTMLElement classes are what we extend to create our web components.

<my-component abc="xyz">Hello World</my-component>

<p is="word-count">Hello</p>

Web components can seem mystic to some people, they really are not. They are simply a way to extend the current ecosystem. In all reality, the HTML ecosystem is pretty well defined already, why do we think we can re-invent it with complicated templating frameworks. It is a simpler and better option to extend what we have, building on the stability and extensible nature of the HTML ecosystem.

There are two ways we can extend HTML, through creation of bespoke, completely new components, or by extending existing components and added extra functionality. New components are better suited to larger application chunks, components that really break the mould by flipping an idea on its head. If we simply want to add a word count to a textarea, it is a better option to extend the textarea component built in to HTML. Find out more on this subject here at mozilla.org.

Custom Web Component deals with three areas, patching through lit-html functions from API tools to directives, for you to use in your components; Adding a base autonomous class to build complex components; Group of customized classes that you can use to extend native HTML components/elements. We create custom web components from custom elements, extending them and registering them as new custom web components, adding them to the DOM as HTML elements or element extensions.

NOTE: Custom element names have to be at least two words seperated by a hyphon!

Autonomous Custom Element

This is a standalone element; it dosn't inherit from a standard HTML element. You use one by them out as an HTML element.

For example <my-component></my-component> or document.createElement("my-component");.

You register one of these using customElements.define('my-component', MyComponent); to the DOM in your new component file.

import CustomHTMLElement - A generic custom HTML element that accepts templates.

Customized Built-in Elements

These inherit from natural HTML elements. To create one, you specify which element to extend using the 'is' attribute.

For example <p is="word-count"></p> or document.createElement("p", { is: "word-count" });.

import CustomHTMLAnchorElement - An extension of the <a></a> HTML element.

import CustomHTMLBodyElement - An extension of the <body></body> HTML element.

import CustomHTMLButtonElement - An extension of the <button></button> HTML element.

import CustomHTMLCanvasElement - An extension of the <canvas></canvas> HTML element.

import CustomHTMLDivElement - An extension of the <div></div> HTML element.

import CustomHTMLFormElement - An extension of the <form></form> HTML element.

import CustomHTMLHeadElement - An extension of the <head></head> HTML element.

import CustomHTMLHeadingElement - An extension of the <heading></heading> HTML element.

import CustomHTMLIFrameElement - An extension of the <iframe></iframe> HTML element.

import CustomHTMLImageElement - An extension of the <img></img> HTML element.

import CustomHTMLInputElement - An extension of the <input></input> HTML element.

import CustomHTMLLabelElement - An extension of the <label></label> HTML element.

import CustomHTMLParagraphElement - An extension of the <p></p> HTML element.

import CustomHTMLSelectElement - An extension of the <select></select> HTML element.

import CustomHTMLSpanElement - An extension of the <span></span> HTML element.

import CustomHTMLTableElement - An extension of the <table></table> HTML element.

import CustomHTMLTextAreaElement - An extension of the <textarea></textarea> HTML element.

lit-html Functionality

The following is a list of functions and directives we pass through custom web component to allow you to import them right from ustom Web Component.

API Classes

import html - Proxied from lit-html through CWC, HTML template result maker.

import render - Proxied from lit-html through CWC, renders a template to a container.

Directive Classes

import asyncReplace - Proxied from lit-html through CWC, generic interface for asynchronous sequential access to data.

import asyncAppend - Proxied from lit-html through CWC, generic interface for asynchronous sequential access to data.

import cache - Proxied from lit-html through CWC, caches the rendered DOM nodes for templates when they’re not in use.

import classMap - Proxied from lit-html through CWC, sets a list of classes based on an object.

import ifDefined - Proxied from lit-html through CWC, sets the attribute if the value is defined and removes the attribute if the value is undefined.

import guard - Proxied from lit-html through CWC, renders the value returned by value. Only re-evaluates value when one of the dependencies changes identity.

import repeat - Proxied from lit-html through CWC, repeats a series of values generated from an iterable, updates items efficiently when the iterable changes.

import styleMap - Proxied from lit-html through CWC, sets styles on an element based on an object.

import unsafeHTML - Proxied from lit-html through CWC, renders the argument as HTML, rather than text.

import until - Proxied from lit-html through CWC, renders placeholder content until the final content is available..

©custom-web-component is the property of Paul Smith (ulsmith)

Made with for the Open Source Community pa.ulsmith.net