@descope/web-components-ui 1.72.0 → 1.73.0

package/dist/cjs/index.cjs.js

@@ -270,19 +270,19 @@ const observeChildren = (ele, callback) => {
 
 const createSyncAttrsCb =
   (srcEle, targetEle, mapAttrs = {}) =>
-  (attrNames) => {
-    attrNames.forEach((attrName) => {
-      const targetAttrName = mapAttrs[attrName] || attrName;
-      const srcAttrVal = srcEle.getAttribute(attrName);
-      if (srcAttrVal !== null) {
-        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-          targetEle.setAttribute(targetAttrName, srcAttrVal);
+    (attrNames) => {
+      attrNames.forEach((attrName) => {
+        const targetAttrName = mapAttrs[attrName] || attrName;
+        const srcAttrVal = srcEle.getAttribute(attrName);
+        if (srcAttrVal !== null) {
+          if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+            targetEle.setAttribute(targetAttrName, srcAttrVal);
+          }
+        } else {
+          targetEle.removeAttribute(targetAttrName);
         }
-      } else {
-        targetEle.removeAttribute(targetAttrName);
-      }
-    });
-  };
+      });
+    };
 
 const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -319,8 +319,16 @@ const forwardProps$2 = (src, target, props = []) => {
   Object.defineProperties(target, config);
 };
 
-const injectStyle = (cssString, ref, {prepend = false} = {}) => {
-  const style = new CSSStyleSheet();
+const injectStyle = (cssString, ref, { prepend = false } = {}) => {
+
+  let style;
+  try {
+    style = new CSSStyleSheet();
+  } catch (e) {
+    // fallback for browsers that don't support CSSStyleSheet
+    return generateStyleTagFallback(cssString, ref, { prepend });
+  }
+
   const _ref = ref?.shadowRoot || ref;
   if (cssString) {
     style.replaceSync(cssString);
@@ -335,6 +343,36 @@ const injectStyle = (cssString, ref, {prepend = false} = {}) => {
   return style;
 };
 
+// we should mimic the CSSStyleSheet API for the fns we are using
+class CSSStyleSheetMock {
+  constructor(cssString, ref, { prepend = false } = {}) {
+    this.styleEle = document.createElement('style');
+    this.styleEle.textContent = cssString;
+    this.styleEle.setAttribute('nonce', window.DESCOPE_NONCE);
+    this.ref = ref?.shadowRoot || ref;
+
+    if (!this.ref) {
+      return
+    }
+
+    if (prepend) {
+      this.ref.prepend(this.styleEle);
+    } else {
+      this.ref.append(this.styleEle);
+    }
+  }
+
+  replaceSync(cssString) {
+    this.styleEle.textContent = cssString;
+  }
+
+  get cssRules() {
+    return this.styleEle.sheet?.cssRules;
+  }
+}
+
+const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) => new CSSStyleSheetMock(cssString, ref, { prepend });
+
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';