mirror of https://github.com/sveltejs/svelte
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
parent
b8959ac09e
commit
1333be0c6a
@ -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…
Reference in new issue