<h2>Slow Element...</h2>
<slow-element>This is stale content</slow-element>
<p>Normal Text Content</p>
body {
  padding: 2rem;
}

slow-element:not(:defined) {
  opacity: 0.1;
}

slow-element:defined {
  opacity: 1;
}
View Compiled 
const template = document.createElement("template");
template.innerHTML = `
  <div>Slow Element now defined</div>
`;

class SlowElement extends HTMLElement {
  constructor() {
    super();
    let templateContent = template.content;
    this._shadowRoot = this.attachShadow({ mode: "open" });
    this._shadowRoot.appendChild(templateContent.cloneNode(true));
  }

  connectedCallback() {}
}

setTimeout(() => {
  customElements.define("slow-element", SlowElement);
}, 2000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.