Last active
April 7, 2019 09:34
-
-
Save nataliemarleny/78fb26ac874a013b7fce4dc0c80eee8f to your computer and use it in GitHub Desktop.
itemScope is a boolean π
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Steps to reproduce funky itemScope rendering behaviour: | |
```sh | |
npm init -y | |
npm i --save react react-dom | |
npm i --save-dev react-scripts | |
mkdir -p public | |
cat <<"EOF" > public/index.html | |
<html> | |
<head></head> | |
<body> | |
<div id="root"></div> | |
</body> | |
</html> | |
EOF | |
mkdir -p src | |
cat <<"EOF" > src/index.js | |
import ReactDOM from "react-dom"; | |
import React, { Fragment } from "react"; | |
ReactDOM.render( | |
<Fragment> | |
<div | |
itemProp="" | |
itemScope="" | |
itemType="" | |
> | |
Item props EMPTY | |
</div> | |
<div | |
itemProp="<something>" | |
itemScope="<something>" | |
itemType="<something>" | |
> | |
Item props non-empty | |
</div> | |
</Fragment>, | |
document.getElementById('root') | |
); | |
EOF | |
$(npm bin)/react-scripts start | |
``` | |
// Resulted in the following DOM (in Chrome devtools): | |
```html | |
<div itemprop="" itemtype="">Item props EMPTY</div> | |
<div itemprop="<something>" itemscope="" itemtype="<something>">Item props non-empty</div> | |
``` | |
// Turns out itemScope is a boolean: set it to itemScope={true} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Proof:
React Source Code:
W3 Spec