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.

Update data- Attributes On A Web Component

TODO: Pull subtitle into page object

Debugging Stuff

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

        -- title

Update data- Attributes On A Web Component

-- html
-- show

<widget-delta data-tango="1" id="deltaWidget"></widget-delta>

-- script
-- show

class WidgetDelta extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' })
        this.clicker = document.createElement('Button')
        this.clicker.innerText = "Click Me"
        this.clicker.addEventListener("click", this.updateTango.bind(this))
        this.shadowRoot.append(this.clicker)
    }

    updateTango() {
      this.dataset.tango = parseInt(this.dataset.tango, 10) + 1
      console.log(this.dataset.tango)
    }
}

customElements.define('widget-delta', WidgetDelta)


-- html
-- show

<button id="reportButton">Report</button>


-- script
-- show

document.addEventListener("DOMContentLoaded", () => {
  reportButton.addEventListener("click", () => {
    console.log(deltaWidget.dataset.tango)
  })
})




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

-- metadata
-- date: 2023-08-31 23:05:32
-- id: 2umgqutw
-- site: aws
-- type: snippet 
-- status: draft