From da53a05056bd52bc2ed6009ec92c96540ec6e425 Mon Sep 17 00:00:00 2001
From: Artem Shinkaruk <46344555+shining-mind@users.noreply.github.com>
Date: Mon, 23 Dec 2024 13:01:25 +0200
Subject: [PATCH] feat(build/snakeskin): normalize v-attrs to directive for web
 components (#1519)

* feat(build/snakeskin): normalize v-attrs to directive for web components

* docs: update changelog
---
 CHANGELOG.md                       |  6 ++++++
 build/snakeskin/CHANGELOG.md       |  6 ++++++
 build/snakeskin/default-filters.js |  7 +++++--
 build/snakeskin/filters/tag.js     | 19 ++++++++++++++-----
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35ea3dc87..39acceaac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,12 @@ Changelog
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v4.0.0-beta.?? (2024-12-23)
+
+#### :house: Internal
+
+* Forced v-attrs to be converted into directive for tags that are web components `build/snakeskin`
+
 ## v4.0.0-beta.170 (2024-12-19)
 
 #### :house: Internal
diff --git a/build/snakeskin/CHANGELOG.md b/build/snakeskin/CHANGELOG.md
index 5a627338a..d07ca525c 100644
--- a/build/snakeskin/CHANGELOG.md
+++ b/build/snakeskin/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v4.0.0-beta.?? (2024-12-23)
+
+#### :house: Internal
+
+* Forced v-attrs to be converted into directive for tags that are web components
+
 ## v4.0.0-beta.155 (2024-11-20)
 
 #### :house: Internal
diff --git a/build/snakeskin/default-filters.js b/build/snakeskin/default-filters.js
index e9cf6fcbe..c9bf5fe28 100644
--- a/build/snakeskin/default-filters.js
+++ b/build/snakeskin/default-filters.js
@@ -82,12 +82,14 @@ function tagFilter({name: tag, attrs = {}}, _, rootTag, forceRenderAsVNode, tplN
 		componentName = tag.camelize(false);
 	}
 
-	const component = componentParams[componentName];
+	const
+		component = componentParams[componentName],
+		isWebComponent = isV4WebComponent.test(tag);
 
 	Object.entries(attrs).forEach(([key, attr]) => {
 		if (isStaticV4Prop.test(key)) {
 			// Do not change any attrs name for web components
-			if (isV4WebComponent.test(tag)) {
+			if (isWebComponent) {
 				return;
 			}
 
@@ -183,6 +185,7 @@ function tagFilter({name: tag, attrs = {}}, _, rootTag, forceRenderAsVNode, tplN
 		rootTag,
 		attrs,
 		component,
+		isWebComponent,
 
 		isSimpleTag,
 		isFunctional,
diff --git a/build/snakeskin/filters/tag.js b/build/snakeskin/filters/tag.js
index b8360363e..a304b9a24 100644
--- a/build/snakeskin/filters/tag.js
+++ b/build/snakeskin/filters/tag.js
@@ -42,6 +42,7 @@ module.exports = [
 	 * @param {string} params.isSimpleTag
 	 * @param {string} params.isFunctional
 	 * @param {string} params.vFuncDir
+	 * @param {boolean} params.isWebComponent
 	 * @throws {Error} if the attributes contain invalid values
 	 */
 	function normalizeV4Attrs({
@@ -50,7 +51,8 @@ module.exports = [
 		attrs,
 		isSimpleTag,
 		isFunctional,
-		vFuncDir
+		vFuncDir,
+		isWebComponent
 	}) {
 		// Remove empty class attributes
 		if (attrs['class'] && !attrs['class'].join().trim()) {
@@ -58,10 +60,17 @@ module.exports = [
 		}
 
 		// To ensure correct functioning on the client side with functional components,
-		// we normalize all calls to the v-attrs directive as props
-		if (attrs['v-attrs']) {
-			attrs[':v-attrs'] = attrs['v-attrs'].slice();
-			delete attrs['v-attrs'];
+		// we normalize all calls to the v-attrs directive as props, except for web components
+		if (!isWebComponent) {
+			if (attrs['v-attrs']) {
+				attrs[':v-attrs'] = attrs['v-attrs'].slice();
+				delete attrs['v-attrs'];
+			}
+
+		// For the web components v-attrs must be normalized to the directive
+		} else if (attrs[':v-attrs']) {
+			attrs['v-attrs'] = attrs[':v-attrs'].slice();
+			delete attrs[':v-attrs'];
 		}
 
 		if (webpack.ssr) {