JavaScript Scratchpad

This is where I play around with JavaScript to figure things out. Current state: Figuring out more about how web components work

Output

Example
Alfa
Bravo
Charlie

here

`; } } customElements.define('user-avatar', UserAvatar); -->

HTML

<aws-code-block-x asdf="asdfasdf">
<div class="code-block-x" pinger>
    <div class="code-title-x">Example</div>
    <div class="code-wrapper-x">
        <div class="code-sidebar-x"></div>
        <pre><code><span class="code-start-x"></span>Alfa
<span class="code-start-x"></span>Bravo
<span class="code-start-x"></span>Charlie</code></pre>
    </div>
</div>
</aws-code-block-x>




<user-avatar
  src="https://www.jim-nielsen.com/.well-known/avatar"
  name="Jim Nielsen"
><div>here</div></user-avatar>

<!--
<script>
  class UserAvatar extends HTMLElement {
    connectedCallback() {
      const src = this.getAttribute("src");
      const name = this.getAttribute("name");
      const els = this.querySelectorAll("div");
      console.log(els);
      this.innerHTML = `
        <div>
          <img
            src="${src}"
            alt="Profile photo of ${name}"
            width="32"
            height="32"
          />
          <!-- Markup/code for the tooltip -->
        </div>
      `;
    }
  }
  customElements.define('user-avatar', UserAvatar);
</script>
-->

class MyCustomElement extends HTMLElement {

  static register(tagName) {
    if ("customElements" in window) {
      customElements.define(tagName || "aws-code", MyCustomElement);
    }
  }

    /*
  constructor() {
    // Always call super first in constructor
    super();
    const x = this.querySelectorAll("div");
    console.log(x);
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `<h1>xTHIS IS SHADOW ROOT</h1>`;
  }
    */

  connectedCallback() {
    setTimeout(() => {
    const a = this.getAttribute("asdf");
    console.log(this)
    const els = this.querySelectorAll("*");
    console.log(`--- ${a} ----`);
    console.log(els)
    })

    /*
    console.log("Custom element added to page.");
    console.log(this.innerHTML);
    console.log(this.querySelectorAll("div"));
    const ping = this.querySelectorAll("[pinger]")
    console.log("HERE")
    console.log(ping)
    */


    /*
    const block = document.querySelector('.code-block-x')
    const newDiv = document.createElement("div")
    newDiv.innerHTML = "ping"
    block.appendChild(newDiv)
    */

  }

/*
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} has changed.`);
  }
*/

}

// MyCustomElement.register();
customElements.define("aws-code-block-x", MyCustomElement);

.code-block-x {
    border-radius: 0.3rem;
    border: 1px solid blue;
    margin-bottom: 2rem;
    position: relative;
}

.code-buttons-x {
    text-align: right;
    border-top: 1px solid blue;
}

.code-sidebar-x {
    border-right: 1px solid blue;
}

.code-start-x{
    counter-increment: codeLineNumberX;
}

.code-start-x:before {
    content: counter(codeLineNumberX);
    display: inline-block;
    margin-left: -5ch;
    padding-right: 2ch;
    position: absolute;
    text-align: end;
    width: 5ch;
}

.code-title-x {
    text-align: center;
    border-bottom: 1px solid blue;
}

.code-wrapper-x {
    counter-reset: codeLineNumberX;
    display: grid;
    grid-template-columns: 5ch 1fr;
}

.code-wrapper-x pre {
    overflow-wrap: break-word;
    padding-left: 1ch;
    white-space: pre-wrap; 
}

.code-wrapper-x pre.no-wrapping {
    white-space: pre; 
    overflow-wrap: normal;
    overflow-x: auto; 
    overscroll-behavior-x: none;
}

~ fin ~