Class inheritance

Classes external to Atomico

import { c, html } from "atomico";

function component() {
  return html`<host shadowDom> ...my content </host>`;
}

class VanillaElement extends HTMLElement {
  constructor() {
    super();
    console.log("create");
  }
  connectedCallback() {
    console.log("mount");
  }
  disconnectedCallback() {
    console.log("mount");
  }
  attributeChangedCallback() {
    console.log("my-attr update");
  }
  static get observedAttributes() {
    return ["my-attr"];
  }
  // ⚠️ not native but valid within Atomico.
  // this is just an example the ideal is to 
  // have a shared reference of the CSSStyleSheet
  static get styles(){
    const sheet= new CSSStyleSheet();
    sheet.replace('a { color: blue; }');
    return sheet;
  }
}


const Component = c( component,  VanillaElement );

component: function that declares the webcomponent for Atomico.

VanillaElement: class that will be extended by Atomico to create Component, Atomico will not break the life cycle of the component, allowing them to interact freely.

Classes internal to Atomico

classes produced by the Atomico function c, these can be extended between components, example:

import { c, html, css } from "atomico";

function component1({ prop1 }) {
  return html`<host shadowDom> ...my content, ${prop1} </host>`;
}

component1.props = {
  prop1: String,
};

component1.styles = css`
  :host {
    font-size: 100px;
  }
`;

function component2({ prop1, prop2 }) {
  return html`<host shadowDom> ...my content, ${prop1} and ${prop2} </host>`;
}

component2.props = {
  prop2: String,
};

const Component1 = c(component1);

const Component2 = c(component2, Component1);

customElements.define("component-2", Component2);

Consider the following effects when using this inheritance model:

1. The render will be rewritten.

2. The props are inherited, Atomico will reuse the previously declared props.

3. Styles are inherited. Atomico will merge the stylesheets.

Inheritance outside of Atomico

The c function creates an optimized standard custom element, which can be extended to modify its behavior, be:

1. Adding methods.

2. Creating or replacing style sheets.

3. Creando nuevas propiedades.

Suppose we have a MyButton product of the function c, we can extend this component to modify its appearance without the need to completely rewrite it, example:

import { css } from "atomico";
import { MyButton } from "./src/my-button/my-button.js";

class MyNewButton extends MyButton {
  static styles = [
    /**
     * super.styles allows to load the previous styles
     * this static property is created internally by atomico
     */
    super.styles,
    /**
     * In the following way we are associated with a new
     * styleSheet to our customElement
     */
    css`
      :host {
        --button-background: teal;
      }
    `,
  ];
}

The benefit of this inheritance is to simplify the modification of the appearance of a component created with Atomico, since it avoids its rewriting.