GemElement

class GemElement extends HTMLElement { constructor(): GemElement; // ... }

Class Decorator

name description
@customElement Class decorator, define custom elements tag
@connectStore Class decorator, bound to Store, element auto update by Store update
@adoptedStyle Class decorator, adopt style sheet
@shadow Class decorator, Use ShadowDOM render content
@light Class decorator, Use light dom render content, default
@async Class decorator, Use no blocking render
@aria Class decorator, Specify the accessibility info

Field Decorator

name description
@attribute Field decorator, defining string type reactivity Attribute
@boolattribute Field decorator, defining boolean type reactivity Attribute
@numattribute Field decorator, defining number type reactivity Attribute
@property Field decorator, define reactivity Property, no default value
@emitter Field decorator, define event emitter, similar to HTMLElement.click
@globalemitter Similar @emitter, comes with composed and bubbles attributes
@state Field decorator, define the inside of the element css state
@slot Field(static or instance) decorator, slot that defines the element
@part Field(static or instance) decorator, part that defines the element

NOTE

Except for @property, all fields decorated by decorators have default values, @attribute/@boolattribute/@numattribute/@state/@slot/@part the value of the decorated field will be automatically converted to kebab-case. Please use the kebab-case value when you use it outside the element outside

Type with decorator

name description
Emitter<T> The type of the field defined by @emitter

Method Decorator

name description
@memo Similar GemElement.memo
@effect Similar GemElement.effect
@willMount Similar GemElement.willMount
@mounted Similar GemElement.mounted
@unmounted Similar GemElement.unmounted
@template Similar GemElement.render + GemElement.shouldUpdate
@fallback When the content render error, rendering the reserve content

Lifecycle hook

name description
willMount Callback before mounting the element
render Render element, clear the content when return null, and do not update the content when return undefined
mounted Callback after mounting the element
shouldUpdate Callback before updating the element, do not re-render the element when returning false
updated Callback after updating the element
unmounted Callback after unloading the element

Method

name description
effect Register side effects, you can specify dependencies
memo Register callback, you can specify dependencies
update Update elements manually
internals Get the element's ElementInternals object

Utils

name description
createRef Defining dom references
createState Specify the element internal state
css Use the constructor to create a style sheet that can be attached to the element
html Template string tags, used to create HTML lit-html templates
svg Template string tags, used to create SVG lit-html templates
render Mount lit-html template to DOM
directive Custom lit-html template rendering directive
repeat Optimize lit-html list rendering directive

NOTE

You can import reactive elements without the lit-html template engine by using import {} from '@mantou/gem/lib/reactive'. If your component is simple enough, using this method will significantly reduce the build size.