call attr bindings if tag is custom element

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -803,6 +803,21 @@ export default class ElementWrapper extends Wrapper {
 
 		const fn = this.node.namespace === namespaces.svg ? x`@set_svg_attributes` : x`@set_attributes`;
 
+		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});`
 			);
@@ -812,6 +827,7 @@ export default class ElementWrapper extends Wrapper {
 					${updates}
 				]));
 			`);
+		}
 
 		// handle edge cases for elements
 		if (this.node.name === 'select') {

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;