From 2287eda5d97c92d8ee3b663f4bea85feeec98e13 Mon Sep 17 00:00:00 2001
From: Edoardo Cavazza <edoardo.cavazza@chialab.it>
Date: Wed, 17 Jul 2024 14:46:36 +0200
Subject: [PATCH] Polyfill `Node.prototype.cloneNode` behavior for Safari

---
 .changeset/famous-suns-reflect.md |  5 +++++
 src/polyfill.ts                   | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/famous-suns-reflect.md

diff --git a/.changeset/famous-suns-reflect.md b/.changeset/famous-suns-reflect.md
new file mode 100644
index 00000000..3982df5d
--- /dev/null
+++ b/.changeset/famous-suns-reflect.md
@@ -0,0 +1,5 @@
+---
+'@chialab/dna': patch
+---
+
+Polyfill `Node.prototype.cloneNode` behavior for Safari.
diff --git a/src/polyfill.ts b/src/polyfill.ts
index d0bd20d6..7b86c34b 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -13,6 +13,8 @@ function polyfillBuiltin() {
     const customElements = window.customElements;
     const define = customElements.define.bind(customElements);
     const upgrade = customElements.upgrade.bind(customElements);
+    const cloneNode = Node.prototype.cloneNode;
+    const setInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
     const filterBuiltinElement = (node: Node) =>
         isElement(node) && node.getAttribute('is') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
     let childListObserver: MutationObserver;
@@ -181,6 +183,7 @@ function polyfillBuiltin() {
             }
 
             const upgradedNode = Reflect.construct(constructor, [root], constructor) as CustomElement;
+            upgradedNode.setAttribute(':ce-polyfill', '');
             for (let i = 0, len = attributes.length; i < len; i++) {
                 const { name, value } = attributes[i];
                 if (upgradedNode.getAttribute(name) === value) {
@@ -235,7 +238,12 @@ function polyfillBuiltin() {
         return nativeCreateElement.call(document, tagName, options);
     };
 
-    const setInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
+    Node.prototype.cloneNode = function (deep?: boolean) {
+        const clone = cloneNode.call(this, deep);
+        polyfillUpgrade(clone as Element);
+        return clone;
+    };
+
     if (setInnerHTML) {
         Object.defineProperty(Element.prototype, 'innerHTML', {
             ...setInnerHTML,