From 1333be0c6ad22fc49792a76478fcb231314bb765 Mon Sep 17 00:00:00 2001
From: Filip Ambrosius <amediocredad@outlook.com>
Date: Mon, 27 Mar 2023 11:02:12 +0200
Subject: [PATCH] fix: Regression `itemscope` as `boolean_attribute` (#8414)

Microdata are a strange set of attributes which are ONLY defined in markup, and have no relationship to the underlying Document Object Model node. As such programmatically defining an element and setting a property on it with a given Microdata attribute will not work:
https://codepen.io/iambrosius/full/jOvXBBG

One can read more about microdata here: https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata

The fix is to remove itemscope being a boolean attribute, because that opts into a transformation as a DOM property, which is wrong.
---
 .../render_dom/wrappers/Element/Attribute.ts  |  1 -
 src/shared/boolean_attributes.ts              |  1 -
 .../attribute-boolean-hidden/_config.js       | 10 ++++++
 .../attribute-boolean-hidden/main.svelte      |  5 +++
 .../attribute-boolean-itemscope/_config.js    | 11 -------
 .../attribute-boolean-itemscope/main.svelte   |  5 ---
 .../samples/attribute-microdata/_config.js    | 25 +++++++++++++++
 .../samples/attribute-microdata/main.svelte   | 31 +++++++++++++++++++
 8 files changed, 71 insertions(+), 18 deletions(-)
 create mode 100644 test/runtime/samples/attribute-boolean-hidden/_config.js
 create mode 100644 test/runtime/samples/attribute-boolean-hidden/main.svelte
 delete mode 100644 test/runtime/samples/attribute-boolean-itemscope/_config.js
 delete mode 100644 test/runtime/samples/attribute-boolean-itemscope/main.svelte
 create mode 100644 test/runtime/samples/attribute-microdata/_config.js
 create mode 100644 test/runtime/samples/attribute-microdata/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 6cb3a00218..64178030f6 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -364,7 +364,6 @@ const attribute_lookup: { [key in BooleanAttributes]: AttributeMetadata } & { [k
 	indeterminate: { applies_to: ['input'] },
 	inert: {},
 	ismap: { property_name: 'isMap', applies_to: ['img'] },
-	itemscope: {},
 	loop: { applies_to: ['audio', 'bgsound', 'video'] },
 	multiple: { applies_to: ['input', 'select'] },
 	muted: { applies_to: ['audio', 'video'] },
diff --git a/src/shared/boolean_attributes.ts b/src/shared/boolean_attributes.ts
index 668dd97975..10513ec712 100644
--- a/src/shared/boolean_attributes.ts
+++ b/src/shared/boolean_attributes.ts
@@ -13,7 +13,6 @@ const _boolean_attributes = [
 	'hidden',
 	'inert',
 	'ismap',
-	'itemscope',
 	'loop',
 	'multiple',
 	'muted',
diff --git a/test/runtime/samples/attribute-boolean-hidden/_config.js b/test/runtime/samples/attribute-boolean-hidden/_config.js
new file mode 100644
index 0000000000..cb38feb93d
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-hidden/_config.js
@@ -0,0 +1,10 @@
+export default {
+	props: {
+		hidden: true
+	},
+	html: '<div hidden />',
+	test({ assert, component, target }) {
+		component.hidden = false;
+		assert.htmlEqual(target.innerHTML, '<div />');
+	}
+};
diff --git a/test/runtime/samples/attribute-boolean-hidden/main.svelte b/test/runtime/samples/attribute-boolean-hidden/main.svelte
new file mode 100644
index 0000000000..f8d7a26910
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-hidden/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let hidden = false;
+</script>
+
+<div {hidden} />
diff --git a/test/runtime/samples/attribute-boolean-itemscope/_config.js b/test/runtime/samples/attribute-boolean-itemscope/_config.js
deleted file mode 100644
index b5b21cfc47..0000000000
--- a/test/runtime/samples/attribute-boolean-itemscope/_config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-	props: {
-		itemscope: true
-	},
-	test({ assert, target, component }) {
-		const div = target.querySelector('div');
-		assert.ok(div.itemscope);
-		component.itemscope = false;
-		assert.ok(!div.itemscope);
-	}
-};
diff --git a/test/runtime/samples/attribute-boolean-itemscope/main.svelte b/test/runtime/samples/attribute-boolean-itemscope/main.svelte
deleted file mode 100644
index 83265a983c..0000000000
--- a/test/runtime/samples/attribute-boolean-itemscope/main.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-export let itemscope;
-</script>
-
-<div {itemscope}  />
diff --git a/test/runtime/samples/attribute-microdata/_config.js b/test/runtime/samples/attribute-microdata/_config.js
new file mode 100644
index 0000000000..8c6a7765ea
--- /dev/null
+++ b/test/runtime/samples/attribute-microdata/_config.js
@@ -0,0 +1,25 @@
+// There is no relationship between the attribute and the dom node with regards to microdata attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata
+export default {
+	html: `<div itemscope itemtype="https://schema.org/SoftwareApplication">
+	<span itemprop="name">Game</span> - REQUIRES
+	<span itemprop="operatingSystem">OS</span><br/>
+	<link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
+
+	<div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">RATING:
+		<span itemprop="ratingValue">4.6</span> (
+		<span itemprop="ratingCount">8864</span> ratings )</div>
+	<div itemref="offers"></div>
+</div>
+
+<div
+	itemprop="offers"
+	itemid="offers"
+	id="offers"
+	itemscope
+	itemtype="https://schema.org/Offer"
+>
+	Price: $<span itemprop="price">1.00</span>
+<meta itemprop="priceCurrency" content="USD"/>
+</div>
+	`
+};
diff --git a/test/runtime/samples/attribute-microdata/main.svelte b/test/runtime/samples/attribute-microdata/main.svelte
new file mode 100644
index 0000000000..f03a6943d9
--- /dev/null
+++ b/test/runtime/samples/attribute-microdata/main.svelte
@@ -0,0 +1,31 @@
+<!-- Example from https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata -->
+<div itemscope itemtype="https://schema.org/SoftwareApplication">
+	<span itemprop="name">Game</span> - REQUIRES
+	<span itemprop="operatingSystem">OS</span><br />
+	<link
+		itemprop="applicationCategory"
+		href="https://schema.org/GameApplication"
+	/>
+
+	<div
+		itemprop="aggregateRating"
+		itemscope
+		itemtype="https://schema.org/AggregateRating"
+	>
+		RATING:
+		<span itemprop="ratingValue">4.6</span> (
+		<span itemprop="ratingCount">8864</span> ratings )
+	</div>
+	<div itemref="offers" />
+</div>
+
+<div
+	itemprop="offers"
+	itemid="offers"
+	id="offers"
+	itemscope
+	itemtype="https://schema.org/Offer"
+>
+	Price: $<span itemprop="price">1.00</span>
+	<meta itemprop="priceCurrency" content="USD" />
+</div>