add an aditional check for is in element attributes/props for custo…

…m elements (#348)
ryansolid · Sep 9, 2024 · f9a00f7 · f9a00f7
1 parent 02547f8
commit f9a00f7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
@@ -61,7 +61,7 @@ export function transformElement(path, info) {
     config = getConfig(path),
     wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
     voidTag = VoidElements.indexOf(tagName) > -1,
-    isCustomElement = tagName.indexOf("-") > -1 || !!path.get("openingElement").get("attributes").find(a => a.node.name?.name === "is"),
+    isCustomElement = tagName.indexOf("-") > -1 || path.get("openingElement").get("attributes").some(a => a.node?.name?.name === "is" || a.name?.name === "is"),
     isImportNode = (tagName === 'img'||tagName === 'iframe') && path.get("openingElement").get("attributes").some(a =>  a.node.name?.name === "loading" && a.node.value?.value === "lazy"
      ),
     results = {
@@ -273,7 +273,7 @@ function transformAttributes(path, results) {
     attributes = path.get("openingElement").get("attributes");
   const tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
-    isCE = tagName.includes("-"),
+    isCE = tagName.includes("-") || attributes.some(a => a.node.name?.name === 'is'),
     hasChildren = path.node.children.length > 0,
     config = getConfig(path);
 
@@ -1000,7 +1000,7 @@ function detectExpressions(children, index, config) {
     } else if (t.isJSXElement(child)) {
       const tagName = getTagName(child);
       if (isComponent(tagName)) return true;
-      if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1))
+      if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1 || child.openingElement.attributes.some(a => a.name?.name === 'is')))
         return true;
       if (
         child.openingElement.attributes.some(

diff --git a/packages/dom-expressions/src/client.js b/packages/dom-expressions/src/client.js
@@ -214,7 +214,7 @@ export function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
     }
   }
   for (const prop in props) {
@@ -223,7 +223,7 @@ export function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
   }
 }
 
@@ -323,7 +323,7 @@ function toggleClassKey(node, key, value) {
     node.classList.toggle(classNames[i], value);
 }
 
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   let isCE, isProp, isChildProp, propAlias, forceProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
@@ -356,7 +356,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     (isChildProp = ChildProperties.has(prop)) ||
     (!isSVG &&
       ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
-    (isCE = node.nodeName.includes("-"))
+    (isCE = (node.nodeName.includes("-") || 'is' in props))
   ) {
     if (forceProp) {
       prop = prop.slice(5);

diff --git a/packages/lit-dom-expressions/src/index.ts b/packages/lit-dom-expressions/src/index.ts
@@ -432,7 +432,7 @@ export function createHTML(r: Runtime, { delegateEvents = true, functionBuilder
         topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`
       );
       const isSVG = r.SVGElements.has(node.name);
-      const isCE = node.name.includes("-");
+      const isCE = node.name.includes("-") || node.attrs.some((e) => e.name === "is");
       options.hasCustomElement = isCE;
       options.isImportNode = (node.name === 'img'||node.name === 'iframe') && node.attrs.some((e) => e.name === "loading" && e.value ==='lazy');