@digitalbooting/brand/index.js

A footer component for indicate if another website is developed of designed for digital booting

class Brand extends HTMLElement {
  constructor() {
    super();
    this.url = "https://digitalbooting.com";
    this.label = "Sitio web construido por Digital Booting | Agencia Creativa";
    this.attachShadow({ mode: "open" });
    this.render();
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(name, oldValue, newValue);
    if (name === "url" || name === "label") {
      if (oldValue !== newValue) {
        this[name] = newValue;
        this.render();
      }
    }
  }

  static get observedAttributes() {
    return ["label", "url"];
  }

  render() {
    if (!this.shadowRoot) return;
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          font: inherit;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        :host * {
          color: inherit;
          text-decoration: none;
        }
        :host a {
          transition: color 0.3s ease;
          text-decoration: none;
        }
      </style>
      <span>
        <a href="${this.url}" target="_blank">${this.label}</a>
      </span>
    `;
  }
}

export default Brand;
export const registerElement = (tag, Element) => {
  if (!window.customElements.get(tag)) {
    window.customElements.define(tag, Element);
  }
};