basic shadow-dom custom element

In this example below you will see how to do a basic shadow-dom custom element with some HTML / CSS and Javascript

This awesome code was written by WebReflection, you can see more from this user in the personal repository.
You can find the original code on
Copyright WebReflection ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>basic shadow-dom custom element</title>



    <script  src="js/index.js"></script>



/*Downloaded from */
customElements.define('shadow-dom', class extends HTMLElement {
  connectedCallback() {
    if (this.hasChildNodes()) {
      const shadow = this.attachShadow(
        // mode open by default, closed as mode="closed"
        {mode: this.getAttribute('mode') || 'open'}
      while (this.hasChildNodes()) {

document.body.innerHTML =
`<div class="foo">
  I am rendered in the Light DOM.
    <div class="foo">
      I am rendered into the Shadow DOM.
        .foo { border: 2px solid red; }