DEVto: Sites A-D

by WebComponents

HTML

<head>
  <site-head id="A">Description A</site-head>
</head>

<body>
  <div site="A"></div>
  <div site="B"></div>
  <div site="C"></div>
  <div site="D"></div>
</body>

CSS

body {
  font: 20px arial;
  font-weight: bold;
  background: beige;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em;
  width:450px;
  height:450px;
  margin: 1em auto;
}

div::before {
  width: 100%;
  height: 100%;
  border: 1px solid grey;
  content: "site"attr(site) ".domain.com";
  display: flex;
  align-items: center;
  justify-content: center;
}

div:nth-child(1) {
  background: yellow;
}

div:nth-child(2) {
  background: firebrick;
}

div:nth-child(3) {
  background: orange;
}

div:nth-child(4) {
  background: teal;
}

JavaScript

customElements.define("site-head", class extends HTMLElement {
  log(label, ...args) {
    console.log(`%c(${this.parentNode}) ${this.nodeName}`, "background:pink",label, ...args);
  }
  connectedCallback() {
    this.log("connected");
    this.remove();
  }
  disconnectedCallback() {
    this.log("disconnected", this.innerHTML);
    const add = ({ tag = "meta", innerHTML = false, ...args }) => {
      let el = document.createElement(tag);
      Object.entries(args).forEach((x) => el.setAttribute(x[0], x[1]));
      if (innerHTML) el.innerHTML = innerHTML;
      return el;
    }
    document.head.append(
      add({
        tag: "title",
        innerHTML: this.innerHTML
      }),
      add({ // meta
        name: `title`,
        content: `Title site${this.id}`
      }),
      add({ // meta
        name: `description`,
        content: this.innerHTML
      })
    );
  }
})