The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Web Component Starter Template

TODO: Pull subtitle into page object
External view of component range:


Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Web Component Starter Template

This is my base line starter template for 
a web component. Note that it's my first 
attempt at this so there's probably thing
that could be imporved in terms of 
effifiency, but it's all working
as expected

-- script
-- title: The Component JavaScript 
-- type: show

  class extends HTMLElement {    

    static get observedAttributes() {
      return ['data-externaltointernal']

    constructor() {
      this.attachShadow({mode: 'open'})
      const tempHolder = document.createElement("div")
      const tempString = `
  <template id="starterComponent">
    <p>From attribute: <span id="initialAttr">-</span></p>
    <p class="wcHighlight">Highlighted from external style sheet set via attribute</p>
    <p>From slot on page: <slot name="slotContent"></slot></p>
    <label for="ctrl">Internal component ranger input:<label>
    <input type="range" id="ctrl" name="ctrl" />
    <p>From internal component range input: <span id="output"></span></p>
    <p>From external range input: <span id="externaltointernaloutput"></span></p>
      tempHolder.innerHTML = tempString
      const el = tempHolder.childNodes[1].content.cloneNode(true)
      const controller = el.getElementById("ctrl")
      const output = el.getElementById("output")
      controller.addEventListener("input", (event) => {
        output.innerHTML =
        this.dataset.sendit =

    getStyleSheet() {
      if (this.dataset.stylesheet !== undefined) {
        const styles = document.createElement('link')
        styles.setAttribute('rel', 'stylesheet')
        styles.setAttribute('href', this.dataset.stylesheet)

    loadAttribute() {
      const initialAttr = this.hasAttribute('initialAttr')
        ? this.getAttribute('initialAttr')
        : "No initialAttr Found"
      this.shadowRoot.getElementById("initialAttr").innerHTML = initialAttr 

    attributeChangedCallback(name, oldValue, newValue) {
      if (name === "data-externaltointernal" && newValue !== oldValue) {
        this.shadowRoot.getElementById("externaltointernaloutput").innerHTML = newValue 

    connectedCallback() {


-- html
-- title: The HTML 
-- showtitle: HTML 
-- type: showabove

  <span slot="slotContent">Tango</span>

<label for="externalInput">Send external input<label>
<input type="range" id="externalInput" name="externalInput" />

<div>External view of component range: <span id="fromComponent"></span></div>

-- script
-- type: show
-- title: The Page JavaScript 

const handleInsideMutations = (mutationList, observer) => {
    for (const mutation of mutationList) {
        if (mutation.attributeName === 'data-sendit') {
            const oldValue = mutation.oldValue
            const newValue =
            if (newValue !== oldValue) {
                fromComponent.innerHTML = newValue

const handleExternalInput = (event) => {
    const newValue =
    document.getElementById('wcExample').dataset.externaltointernal = newValue

const init = () => {
        .addEventListener('input', handleExternalInput)
    const theComponent = document.getElementById('wcExample')
    const observer = new MutationObserver(handleInsideMutations)
    observer.observe(theComponent, { attributes: true })
document.addEventListener('DOMContentLoaded', init)

-- h2


-- todo

[x] Single call (doesn't define class before 
adding it)

[x] Includes template directly inside JavaScript

[x] Call an external stylesheet

[x] Get content from a slot

[x] Get data from a attribute set in parent element call

[x] Get feedback inside the component from a form
inside the component

[x] Get feedback outside the component from a form
inside the component 

[x] Get feedback inside the component from a form
outside the component 

-- categories
-- Web Components 
-- WebDev
-- JavaScript 

-- metadata
-- date: 2023-09-01 15:13:17
-- id: 2uoaxmqz
-- site: aws
-- type: post
-- status: draft 

-- iref
-- id: 2uognjul

-- iref
-- id: 2uohob5o