TagDescriptor | ottavino

Create the component as a custom element

Hierarchy

BaseDescriptor
- TagDescriptor

Index

Properties

Optional attributes

attributes: TypedObject<AttributeChangeHandler>

Key-Value store of observed attributes reflected from the DOM element to the handler

example

 attributes: {
   'type': function (value: string, oldValue: string, domNode: HTMLElement) {
     this.type = value;
     domNode.dispatchEvent(new Event('type-changed'));
   }
 }

Optional closed

closed: undefined | true

Whether

Optional connectedCallback

connectedCallback: undefined | function

Triggered from the custom element's connectedCallback. The function will receive the DOM node as argument

Optional directives

directives: Directive[]

Scoped directives to be applied on the component's template These are added to the global directives Scoped directives are not to be registered globally

Optional disconnectedCallback

disconnectedCallback: undefined | function

Triggered from the custom element's disconnectedCallback. The function will receive the DOM node as argument

Optional init

init: undefined | function

Component initializer function. Triggered immediately upon creation. When a component is defined as a custom-element, it is triggered from the constructor.

example

init: function () {
 this.someValue = "hello"
}

Optional properties

properties: TypedObject<any>

Key-Value store of properties initialized on the DOM element Every change in these properties on the DOM element is reflected into the component handler

Optional shadow

shadow: undefined | false | true

Whether to use shadow root in the mount point or the custom element

default-value: false

tag

tag: string

The localName (tag) that will be registered with the custom elements registry

template

template: string

HTML Tree with expressions and directives

example

<style>
  :host {
    border: 3px double darkred;
  }
</style>
<span onclick="{{this.counter++}}" part="greeter">
   {{this.prefix || '😃'}}
   <slot></slot>
   {{this.postfix || '😃'}}
</span>

Optional this

this: any

The component handler. Anything in the template relates to this will be applied on the handler