From cee10fee4eae14de81b9fc5a310269590624343b Mon Sep 17 00:00:00 2001 From: STEINNI Date: Sun, 22 Feb 2026 14:43:46 +0000 Subject: [PATCH] graflow: isolated attribute --- bzGraflow.js | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/bzGraflow.js b/bzGraflow.js index 19d16ad..98766be 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -35,10 +35,15 @@ class BZgraflow extends Buildoz{ console.warn('BZgraflow: No flow URL !?') return } - this.mainContainer = document.createElement('div') - this.mainContainer.classList.add('bzgf-main-container') - this.shadow = this.mainContainer.attachShadow({ mode: 'open' }) + // If attribute "isolated" is present, render inside a shadow root. + // Otherwise, render in light DOM (no shadow DOM). + this.hostContainer = document.createElement('div') + this.hostContainer.classList.add('bzgf-main-container') + this.mainContainer = this.hasAttribute('isolated') + ? this.hostContainer.attachShadow({ mode: 'open' }) + : this.hostContainer const style = document.createElement('style') + //TODO kick this wart somewhere under a carpet style.textContent = ` @import '/app/assets/styles/icons.css'; .bzgf-wires-container, @@ -67,17 +72,16 @@ class BZgraflow extends Buildoz{ scale(var(--sx, 1), var(--sy, 1)); transition: transform 300ms ease-in-out; } - ` - this.shadow.appendChild(style) + this.mainContainer.appendChild(style) this.nodesContainer = document.createElement('div') this.nodesContainer.classList.add('bzgf-nodes-container') this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg') this.wiresContainer.setAttribute('overflow','visible') this.wiresContainer.classList.add('bzgf-wires-container') - this.shadow.append(this.wiresContainer) - this.shadow.append(this.nodesContainer) - this.append(this.mainContainer) + this.mainContainer.append(this.wiresContainer) + this.mainContainer.append(this.nodesContainer) + this.append(this.hostContainer) this.loadFlow(flowUrl) // Let it load async } @@ -126,14 +130,17 @@ class BZgraflow extends Buildoz{ } // Now load styles (once) - if(!BZgraflow._loadedNodeStyles.has(url) || this.attributes.isolated) { + const isIsolated = this.hasAttribute('isolated') + if(isIsolated || !BZgraflow._loadedNodeStyles.has(url)) { const styles = doc.querySelectorAll('style') styles.forEach(styleEl => { const style = document.createElement('style') style.textContent = styleEl.textContent - this.shadow.appendChild(style) + this.mainContainer.appendChild(style) }) - BZgraflow._loadedNodeStyles.add(url) + // In non-isolated (light DOM) mode, styles apply globally so we can de-dupe across instances. + // In isolated (shadow DOM) mode, styles must be injected per instance. + if(!isIsolated) BZgraflow._loadedNodeStyles.add(url) } }