Custom Element
Includes information about Custom Elements on the context of the renderer.
# Attributes vs Properties
Please refer to the page Attributes and Properties
# customElement (factory)
customElement(name, constructor, options?) registers a custom element with customElements.define, but only if the tag name has not been defined yet. This makes it safe to call from modules that may be imported more than once (hot reload, multiple entry points) without throwing a NotSupportedError.
| name | type | description |
|---|---|---|
| name | string | tag name — must contain a hyphen |
| constructor | CustomElementConstructor | class extending HTMLElement (or CustomElement from pota/components) |
| options? | ElementDefinitionOptions | forwarded to customElements.define (for example { extends: "button" }) |
# CustomElement Class
The CustomElement Class provides an API for common needed things on Custom Elements. It was developed to be used as a base class for a pota components library.
On construct it will attach a shadowRoot in mode open. If the constructor has a static array field named styleSheets, then, the shadowRoot will adopt the stylesheets. Example:
| name | kind | argument | description |
|---|---|---|---|
| addStyleSheets | Method | (CSSStyleSheet|urls)[] | Given an array containing CSSStyleSheet or urls, it will append the stylesheets to document.adoptedStyleSheets. When it's an URL it will fetch, create a CSSStyleSheet and cache it for the given URL. So different Custom Elements all share the same CSSStyleSheet. |
| addStyleSheetExternal | Method | url | Helper for addStyleSheets. See above |
| query | Method | selector | Alias for element.querySelector |
| html | Setter | Component | html is a setter that can be used with a string or any Component. The result will replace childrens on the shadowRoot. |
| hidden | Setter | boolean | signal | hidden is a setter that will check the value passed for truthiness and add or remove an attribute named hidden on the Element. |
| emit | Method | eventName, [data] | Method to dispatch an event from a custom element. |
| hasSlot | Method | slotName | Returns a boolean indicating if a slot is present. TODO: This should return a signal instead. |