# Class inheritance

### Classes external to Atomico

```javascript
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:

```javascript
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:

```javascript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atomico.gitbook.io/doc/guides/archives/class-inheritance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.