Let's say that we have a web component called <header-image> whose purpose is to show an image, and, on hover, it should be able to show a text that shows a small description of the image. The definition of this web component would look something like this:
export default class HeaderImage extends HTMLElement {
constructor() {
// We are not even going to touch this.
super();
// lets create our shadow root
this.shadowObj = this.attachShadow({mode: 'open'});
// Then lets render the template
this.render();
}
static get observedAttributes() {
return ['src', 'alttext'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'src') {
this.src = newValue;
this.render();
}
if (name == 'alttext') {
this.alt = newValue;
...
