diff --git a/bzGraflow.js b/bzGraflow.js index 3c06e67..b7f7176 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -143,18 +143,27 @@ class BZgraflow extends Buildoz{ } } - // Now load styles (once) + // Now load styles const isIsolated = this.hasAttribute('isolated') - if(isIsolated || !BZgraflow._loadedNodeStyles.has(url)) { - const styles = doc.querySelectorAll('style') + const styles = doc.querySelectorAll('style') + if(isIsolated) { + // Shadow DOM: styles are per-instance styles.forEach(styleEl => { const style = document.createElement('style') style.textContent = styleEl.textContent this.mainContainer.appendChild(style) }) - // 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) + } else { + // Light DOM: inject into document.head once per nodesFile url + if(!BZgraflow._loadedNodeStyles.has(url)) { + styles.forEach(styleEl => { + const style = document.createElement('style') + style.textContent = styleEl.textContent + style.dataset.bzgfNodesStyle = url + document.head.appendChild(style) + }) + BZgraflow._loadedNodeStyles.add(url) + } } this.dispatchEvent(new CustomEvent('nodesLoaded', { detail: { url }, @@ -302,6 +311,9 @@ class BZgraflow extends Buildoz{ if(pos === 'static') oldEl.style.position = 'relative' newEl.style.position = 'absolute' newEl.style.inset = '0' + // Override bz-graflow's default width/height (100vw/50vh) when used as an embedded overlay + newEl.style.width = '100%' + newEl.style.height = '100%' newEl.style.display = 'block' oldEl.appendChild(newEl) }