Class inheritance

Classes external to Atomico

1
import { c, html } from "atomico";
2
3
function component() {
4
return html`<host shadowDom> ...my content </host>`;
5
}
6
7
class VanillaElement extends HTMLElement {
8
constructor() {
9
super();
10
console.log("create");
11
}
12
connectedCallback() {
13
console.log("mount");
14
}
15
disconnectedCallback() {
16
console.log("mount");
17
}
18
attributeChangedCallback() {
19
console.log("my-attr update");
20
}
21
static get observedAttributes() {
22
return ["my-attr"];
23
}
24
// ⚠️ not native but valid within Atomico.
25
// this is just an example the ideal is to
26
// have a shared reference of the CSSStyleSheet
27
static get styles(){
28
const sheet= new CSSStyleSheet();
29
sheet.replace('a { color: blue; }');
30
return sheet;
31
}
32
}
33
34
35
const Component = c( component, VanillaElement );
Copied!
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:
1
import { c, html, css } from "atomico";
2
3
function component1({ prop1 }) {
4
return html`<host shadowDom> ...my content, ${prop1} </host>`;
5
}
6
7
component1.props = {
8
prop1: String,
9
};
10
11
component1.styles = css`
12
:host {
13
font-size: 100px;
14
}
15
`;
16
17
function component2({ prop1, prop2 }) {
18
return html`<host shadowDom> ...my content, ${prop1} and ${prop2} </host>`;
19
}
20
21
component2.props = {
22
prop2: String,
23
};
24
25
const Component1 = c(component1);
26
27
const Component2 = c(component2, Component1);
28
29
customElements.define("component-2", Component2);
30
Copied!
Consider the following effects when using this inheritance model:
  1. 1.
    The render will be rewritten.
  2. 2.
    The props are inherited, Atomico will reuse the previously declared props.
  3. 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. 1.
    Adding methods.
  2. 2.
    Creating or replacing style sheets.
  3. 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:
1
import { css } from "atomico";
2
import { MyButton } from "./src/my-button/my-button.js";
3
4
class MyNewButton extends MyButton {
5
static styles = [
6
/**
7
* super.styles allows to load the previous styles
8
* this static property is created internally by atomico
9
*/
10
super.styles,
11
/**
12
* In the following way we are associated with a new
13
* styleSheet to our customElement
14
*/
15
css`
16
:host {
17
--button-background: teal;
18
}
19
`,
20
];
21
}
Copied!
The benefit of this inheritance is to simplify the modification of the appearance of a component created with Atomico, since it avoids its rewriting.
Last modified 3mo ago