Skip to content

Commit 1333be0

Browse files
authored
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.
1 parent b8959ac commit 1333be0

File tree

8 files changed

+71
-18
lines changed

8 files changed

+71
-18
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,6 @@ const attribute_lookup: { [key in BooleanAttributes]: AttributeMetadata } & { [k
364364
indeterminate: { applies_to: ['input'] },
365365
inert: {},
366366
ismap: { property_name: 'isMap', applies_to: ['img'] },
367-
itemscope: {},
368367
loop: { applies_to: ['audio', 'bgsound', 'video'] },
369368
multiple: { applies_to: ['input', 'select'] },
370369
muted: { applies_to: ['audio', 'video'] },

src/shared/boolean_attributes.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const _boolean_attributes = [
1313
'hidden',
1414
'inert',
1515
'ismap',
16-
'itemscope',
1716
'loop',
1817
'multiple',
1918
'muted',
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
props: {
3+
hidden: true
4+
},
5+
html: '<div hidden />',
6+
test({ assert, component, target }) {
7+
component.hidden = false;
8+
assert.htmlEqual(target.innerHTML, '<div />');
9+
}
10+
};
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script>
2+
export let hidden = false;
3+
</script>
4+
5+
<div {hidden} />

test/runtime/samples/attribute-boolean-itemscope/_config.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

test/runtime/samples/attribute-boolean-itemscope/main.svelte

Lines changed: 0 additions & 5 deletions
This file was deleted.
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// 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
2+
export default {
3+
html: `<div itemscope itemtype="https://schema.org/SoftwareApplication">
4+
<span itemprop="name">Game</span> - REQUIRES
5+
<span itemprop="operatingSystem">OS</span><br/>
6+
<link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
7+
8+
<div itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">RATING:
9+
<span itemprop="ratingValue">4.6</span> (
10+
<span itemprop="ratingCount">8864</span> ratings )</div>
11+
<div itemref="offers"></div>
12+
</div>
13+
14+
<div
15+
itemprop="offers"
16+
itemid="offers"
17+
id="offers"
18+
itemscope
19+
itemtype="https://schema.org/Offer"
20+
>
21+
Price: $<span itemprop="price">1.00</span>
22+
<meta itemprop="priceCurrency" content="USD"/>
23+
</div>
24+
`
25+
};
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!-- Example from https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata -->
2+
<div itemscope itemtype="https://schema.org/SoftwareApplication">
3+
<span itemprop="name">Game</span> - REQUIRES
4+
<span itemprop="operatingSystem">OS</span><br />
5+
<link
6+
itemprop="applicationCategory"
7+
href="https://schema.org/GameApplication"
8+
/>
9+
10+
<div
11+
itemprop="aggregateRating"
12+
itemscope
13+
itemtype="https://schema.org/AggregateRating"
14+
>
15+
RATING:
16+
<span itemprop="ratingValue">4.6</span> (
17+
<span itemprop="ratingCount">8864</span> ratings )
18+
</div>
19+
<div itemref="offers" />
20+
</div>
21+
22+
<div
23+
itemprop="offers"
24+
itemid="offers"
25+
id="offers"
26+
itemscope
27+
itemtype="https://schema.org/Offer"
28+
>
29+
Price: $<span itemprop="price">1.00</span>
30+
<meta itemprop="priceCurrency" content="USD" />
31+
</div>

0 commit comments

Comments
 (0)