Switch to modern webcomponents polyfill + workaround issue with it

See webcomponents/polyfills#477

BookReaderDemo/demo-internetarchive.html

@@ -8,7 +8,7 @@
  <meta name="apple-mobile-web-app-capable" content="yes">
 
  <!-- JS dependencies -->
- <script src="https://unpkg.com/@webcomponents/custom-elements"></script>
+ <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-bundle.js"></script>
  <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

babel.config.js

@@ -14,6 +14,5 @@ module.exports = {
  ["@babel/plugin-proposal-class-properties", {loose: true}],
  ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
  ["@babel/plugin-proposal-private-methods", { loose: true }],
- "transform-custom-element-classes",
  ]
 };

package.json

@@ -50,7 +50,6 @@
  "@open-wc/testing-karma": "^4.0.9",
  "@types/jest": "27.0.1",
  "babel-loader": "8.2.2",
- "babel-plugin-transform-custom-element-classes": "^0.1.0",
  "codecov": "3.8.3",
  "concurrently": "6.0.2",
  "core-js": "3.16.2",

src/BookReader/Mode1Up.js

@@ -16,7 +16,11 @@ export class Mode1Up {
  this.mode1UpLit = new Mode1UpLit(bookModel, br);
 
  /** @private */
- this.$el = $(this.mode1UpLit).addClass('br-mode-1up BRmode1up');
+ this.$el = $(this.mode1UpLit)
+ // We CANNOT use `br-mode-1up` as a class, because it's the same
+ // as the name of the web component, and the webcomponents polyfill
+ // uses the name of component as a class for style scoping 😒
+ .addClass('br-mode-1up__root BRmode1up');
 
  /** Has mode1up ever been rendered before? */
  this.everShown = false;

src/css/_BRpages.scss

@@ -17,7 +17,7 @@
  cursor: unset;
 }
 
-.br-mode-1up {
+.br-mode-1up__root {
  display: block;
  overflow: auto;
  position: relative;