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 A Parent CSS Stylesheet From A Web Component

TODO: Pull subtitle into page object
alfa

Debugging Stuff

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

        -- title

Update A Parent CSS Stylesheet From A Web Component

You can update a page's CSS custom property variables 
from inside a web component like this:

-- html

<div id="alfa">alfa</div>

<css-var-changer></css-var-changer>

-- css
-- show

#alfa {
  border: var(--main-border-primary-base);
}

-- script
-- show
-- title: Component

customElements.define('css-var-changer', 
  class extends HTMLElement {    
    constructor() {
      super()
      this.attachShadow({mode: 'open'})
      const tempHolder = document.createElement("div")
      const tempString = `
  <template>
  <button id="changeButton">Change It</button>
  </template>`
      tempHolder.innerHTML = tempString
      const el = tempHolder.childNodes[1].content.cloneNode(true)
      el.getElementById("changeButton").addEventListener(
        "click", 
        () => {
          document.documentElement.style.setProperty(
            '--main-border-primary-base', '1px solid #ff2233'
          )
        }
      )
      this.shadowRoot.append(el)
    }
  }
)



-- categories
-- CSS 
-- JavaScript
-- Web Components 

-- metadata
-- date: 2023-09-02 00:27:31
-- id: 2upfwgsg
-- site: aws
-- type: post
-- status: published