refactor: use CSSStyleSheet object to change the custom property of size inside shadow DOM dynamically

Author: YuskaWu

src/main.ts

@@ -25,13 +25,13 @@ template.innerHTML = templateContent
 
 const PLACEMENT = ['top-right', 'top-left', 'bottom-right', 'bottom-left']
 
-const DEFAULT_SIZE = '5rem'
 const DEFAULT_BANNER_COLOR = 'black'
 const DEFAULT_OCTOCAT_COLOR = 'white'
 const DEFAULT_DURATION = '0.5s'
 
 class GithubCorner extends HTMLElement {
   #shadowRoot: ShadowRoot
+  #styleSheet: CSSStyleSheet
 
   #anchor: HTMLAnchorElement
   #svgContainer: SVGElement
@@ -46,14 +46,15 @@ class GithubCorner extends HTMLElement {
   constructor() {
     super()
 
+    this.#styleSheet = new CSSStyleSheet()
+    this.#styleSheet.replaceSync(cssContent)
+
     // Create a shadow root
     this.#shadowRoot = this.attachShadow({ mode: 'open' })
-
-    const style = document.createElement('style')
-    style.textContent = cssContent
+    this.#shadowRoot.adoptedStyleSheets = [this.#styleSheet]
 
     // attach the created elements to the shadow DOM
-    this.#shadowRoot.append(style, template.content.cloneNode(true))
+    this.#shadowRoot.append(template.content.cloneNode(true))
     this.#anchor = this.#shadowRoot.querySelector('a.link') as HTMLAnchorElement
 
     this.#svgContainer = this.#shadowRoot.querySelector(
@@ -91,9 +92,6 @@ class GithubCorner extends HTMLElement {
   }
 
   #init() {
-    const size = this.getAttribute('size')
-    this.#setSize(size ? size : DEFAULT_SIZE)
-
     if (!this.#banner.getAttribute('fill')) {
       this.#banner.setAttribute('fill', DEFAULT_BANNER_COLOR)
     }
@@ -110,11 +108,6 @@ class GithubCorner extends HTMLElement {
     }
   }
 
-  #setSize(size: string) {
-    this.style.width = size
-    this.style.height = size
-  }
-
   connectedCallback() {
     if (this.#status === 'init') {
       this.#init()
@@ -137,7 +130,11 @@ class GithubCorner extends HTMLElement {
   ) {
     switch (attributeName) {
       case 'size':
-        this.#setSize(newValue)
+        // replace size custom property
+        this.#styleSheet.deleteRule(0)
+        this.#styleSheet.insertRule(
+          `:host { --github-corner-size: ${newValue}; }`
+        )
         break
 
       case 'href':

src/style.css

@@ -1,9 +1,15 @@
+:host {
+  --github-corner-size: 5rem;
+}
+
 :host {
   display: block;
   position: absolute;
   cursor: pointer;
   overflow: hidden;
   clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
+  width: var(--github-corner-size);
+  height: var(--github-corner-size);
 }
 
 :host([placement='top-left']) {