From 9ed5cc17827e2ac16cbd683df9292ace4ed84e74 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 7 Aug 2022 02:26:01 +0900
Subject: [PATCH] call attr bindings if tag is custom element

---
 .../render_dom/wrappers/Element/index.ts      | 32 ++++++++++++++-----
 src/runtime/internal/dom.ts                   |  6 ++++
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index eed7c6f4ee..45891894ca 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -803,15 +803,31 @@ export default class ElementWrapper extends Wrapper {
 
 		const fn = this.node.namespace === namespaces.svg ? x`@set_svg_attributes` : x`@set_attributes`;
 
-		block.chunks.hydrate.push(
-			b`${fn}(${this.var}, ${data});`
-		);
+		if (this.node.is_dynamic_element) {
+			// call attribute bindings for custom element if tag is custom element
+			const tag = this.node.tag_expr.manipulate(block);
+			const attr_update = b`
+				if (/-/.test(${tag})) {
+					@set_custom_element_data_map(${this.var}, ${data});
+				} else {
+					${fn}(${this.var}, ${data});
+				}`;
+			block.chunks.hydrate.push(attr_update);
+			block.chunks.update.push(b`
+				${data} = @get_spread_update(${levels}, [${updates}]);
+				${attr_update}`
+			);
+		} else {
+			block.chunks.hydrate.push(
+				b`${fn}(${this.var}, ${data});`
+			);
 
-		block.chunks.update.push(b`
-			${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [
-				${updates}
-			]));
-		`);
+			block.chunks.update.push(b`
+				${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [
+					${updates}
+				]));
+			`);
+		}
 
 		// handle edge cases for elements
 		if (this.node.name === 'select') {
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 072506629c..9498c75e15 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -310,6 +310,12 @@ export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attrib
 	}
 }
 
+export function set_custom_element_data_map(node, data_map: Record<string, unknown>) {
+	Object.keys(data_map).forEach((key) => {
+		set_custom_element_data(node, key, data_map[key]);
+	});
+}
+
 export function set_custom_element_data(node, prop, value) {
 	if (prop in node) {
 		node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;