Web Components を使う際の設定

Start using web components in React – Jens Jansson – Medium

package.json

↓を追記

"scripts": {
  "postinstall": "vendor-copy",
  ...
},

vendorCopyを追記

"vendorCopy": [
  {
    "from": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
    "to": "public/vendor/custom-elements-es5-adapter.js"
  },
  {
    "from": "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
    "to": "public/vendor/webcomponents-bundle.js"
  }
]

最終的には以下になる

{
  "name": "react-web-components",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@webcomponents/webcomponentsjs": "^2.2.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "postinstall": "vendor-copy",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "vendorCopy": [
    {
      "from": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
      "to": "public/vendor/custom-elements-es5-adapter.js"
    },
    {
      "from": "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
      "to": "public/vendor/webcomponents-bundle.js"
    }
  ],
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

public/index.html

<script src="%PUBLIC_URL%/vendor/webcomponents-bundle.js"></script>
<script>if (!window.customElements) { document.write("<!--"); }</script>
<script src="%PUBLIC_URL%/vendor/custom-elements-es5-adapter.js"></script>
<!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

<!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->は必須との事です。
その理由として、customElementsをサポートしていないブラウザではcustom-elements-es5-adapter.jsのロードが必要になるようです。

が、Chrome、Edge、IE11では、webcomponents-bundle.jsをロードしていれば、window.customElementsにはオブジェクトが入っているのでcustom-elements-es5-adapter.jsがロードされることはなさそうです。

npm install --save-dev babel-loader @babel/core

Babel · The compiler for next generation JavaScript