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