Class inheritance

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 );

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);

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;
      }
    `,
  ];
}