feat(build/snakeskin): normalize v-attrs to directive for web compone…

…nts (#1519)

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

* docs: update changelog

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

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

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,

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,18 +51,26 @@ module.exports = [
 		attrs,
 		isSimpleTag,
 		isFunctional,
-		vFuncDir
+		vFuncDir,
+		isWebComponent
 	}) {
 		// Remove empty class attributes
 		if (attrs['class'] && !attrs['class'].join().trim()) {
 			delete attrs['class'];
 		}
 
 		// 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) {