Component

constructor

+ new Component(options?: Record<string, unknown>): Component

Defined in src/component.tsx:218

Crée une instance de Component

Parameters:

Returns: Component

Retourne le composant avec le nom définit par la directive customElement.

Protected _props

• _props: any

Defined in src/component.tsx:200

Propriété qui permet de définir les attributs lors de l’utilisation de cette classe avec [[JSX]]

Protected showInternalLog

• showInternalLog: boolean = false

Defined in src/component.tsx:92

Si true, les logs spécifiés dans le composant Component sont publiés. False par défaut

Static Optional styles

▪ styles? : CSSResult | CSSResultArray

Defined in src/component.tsx:135

Permet de déclarer les styles en utilisant le tag css, exemple :

  static get styles() {
      return css`
      :host {
          font-family: Arial, Helvetica, sans-serif;
          margin: auto;
          width: 25rem;
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      `
  }

Static observedAttributes

• get observedAttributes(): string[]

Defined in src/component.tsx:100

Spécifique au web component. Permet de déclarer les propriétés qui seront observées et provoqueront un nouveau rendu via render et le rappel de attributeChangedCallback

Inutile d’utiliser cette méthode. Elle est appelé automatiquement grâce à la directive @property

Returns: string[]

Retourne un tableau contenant les noms des attributs que vous voulez observer

attributeChangedCallback

▸ attributeChangedCallback(attrName: string, oldVal: unknown, newVal: unknown): void

Defined in src/component.tsx:259

Spécifique au web component. Si la nouvelle valeur de l’attribut observé est différente de l’ancienne, l’attribut est alors affecté comme propriété. La méthode render est par conséquent relancée

Parameters:

Returns: void

Protected beforeRender

▸ beforeRender(_changedProperties: PropertyValues): void

Defined in src/component.tsx:294

Appelé avant le rendu du composant. Permet d’interagir avec les éléments à chaque appel du composant avant sa création dans le dom

Parameters:

Returns: void

connectedCallback

▸ connectedCallback(): void

Defined in src/component.tsx:234

Spécifique au web component. Appelé lorsque l’élément personnalisé est connecté pour la première fois au DOM du document

Returns: void

disconnectedCallback

▸ disconnectedCallback(): void

Defined in src/component.tsx:248

Spécifique au web component. Appelé lorsque l’élément personnalisé est déconnecté du DOM du document

Returns: void

forceUpdate

▸ forceUpdate(): void

Defined in src/component.tsx:271

Force le composant à relancer la methode render et donc une mise à jour du template html. Utile si on souhaite mettre à jour le composant sans modifier une propriété observable

Returns: void

Protected firstUpdated

▸ firstUpdated(_changedProperties: PropertyValues): void

Defined in src/component.tsx:331

Appelé lors de la première mise à jour du composant

Utile pour réaliser des actions qui ne doivent avoir lieu qu’une fois, comme la récupération des différents éléments rendus dans la méthode render, en utilisant les méthodes existantes dans les librairies DOM et SHADOWDOM de WAPITIS ou l’API DOM. Par exemple avec querySelector et la propriété shadowRoot :

  this._input = this.shadowRoot!.querySelector('input')

Parameters:

Returns: void

Protected render

▸ render(): TemplateResult | void

Defined in src/component.tsx:306

Permet de créer le composant dans le DOM grâce au tag html de lit-html

Returns: TemplateResult | void

Retourne un TemplateResult qui est ensuite interprété et permet la mise à jour du DOM

Protected shouldUpdate

▸ shouldUpdate(_changedProperties: PropertyValues): boolean

Defined in src/component.tsx:282

Permet de conditionner le rendu du composant

render est appelé si la fonction retourne true. Ce qui est le comportement par défaut

Parameters:

Returns: boolean

Protected updated

▸ updated(_changedProperties: PropertyValues): void

Defined in src/component.tsx:315

Appelé lors de chaque mise à jour du composant

Permet de réaliser des tâches après le rendu du composant à chaque appel en utilisant l’API DOM ou les librairies DOM et SHADOWDOM, par exemple pour le focus d’un élément

Parameters:

Returns: void

Static createProperty

▸ createProperty(name: PropertyKey, options?: IPropertyOptions): void

Defined in src/component.tsx:146

Crée une propriété avec son setter et son getter et définit, grâce aux options, si elle est observable et l’ajoute en tant qu’attribut, le cas échéant

Lors de la création, demande une update et la lance si aucune autre demande n’est en cours. Ce qui amène ensuite à relancer la méthode render

Il n’est ni necessaire ni recommandé d’utiliser cette méthode qui est appelée via la directive @property

Parameters:

Returns: void