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.
pull/8430/head
Filip Ambrosius 2 years ago committed by GitHub
parent b8959ac09e
commit 1333be0c6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -364,7 +364,6 @@ const attribute_lookup: { [key in BooleanAttributes]: AttributeMetadata } & { [k
indeterminate: { applies_to: ['input'] }, indeterminate: { applies_to: ['input'] },
inert: {}, inert: {},
ismap: { property_name: 'isMap', applies_to: ['img'] }, ismap: { property_name: 'isMap', applies_to: ['img'] },
itemscope: {},
loop: { applies_to: ['audio', 'bgsound', 'video'] }, loop: { applies_to: ['audio', 'bgsound', 'video'] },
multiple: { applies_to: ['input', 'select'] }, multiple: { applies_to: ['input', 'select'] },
muted: { applies_to: ['audio', 'video'] }, muted: { applies_to: ['audio', 'video'] },

@ -13,7 +13,6 @@ const _boolean_attributes = [
'hidden', 'hidden',
'inert', 'inert',
'ismap', 'ismap',
'itemscope',
'loop', 'loop',
'multiple', 'multiple',
'muted', 'muted',

@ -0,0 +1,10 @@
export default {
props: {
hidden: true
},
html: '<div hidden />',
test({ assert, component, target }) {
component.hidden = false;
assert.htmlEqual(target.innerHTML, '<div />');
}
};

@ -0,0 +1,5 @@
<script>
export let hidden = false;
</script>
<div {hidden} />

@ -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);
}
};

@ -1,5 +0,0 @@
<script>
export let itemscope;
</script>
<div {itemscope} />

@ -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>
`
};

@ -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>
Loading…
Cancel
Save