Fix styles injecting #37, update readme, update deps, update demos

Author: alekswebnet

README.md

@@ -1,39 +1,32 @@
-<p align="center">
-<img src="https://alekswebnet.github.io/pdfjs-viewer-element/logo.svg" width="60"/>
-</p>
-<h1 align="center">pdfjs-viewer-element</h1>
+# pdfjs-viewer-element
+
+Custom element that embeds [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe`.
 
-The simplest integration of [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe` element and web component. 
 The package provides a custom element, based on PDF.js [viewer options](https://github.com/mozilla/pdf.js/wiki/Viewer-options) and [URL parameters](https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js#url-parameters) API. 
+
 Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and works with most [JS frameworks](https://custom-elements-everywhere.com/).
 
-See [demo pages](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo) for various usecases.
-See [live examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo) of usage with frameworks.
+[![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
+[![Package Quality](https://packagequality.com/shield/pdfjs-viewer-element.svg)](https://packagequality.com/#?package=pdfjs-viewer-element)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pdfjs-viewer-element)
+
+![PDF.js viewer](image.webp)
 
 ## Features
 
 - Simple PDF.js viewer integration to any web application
-- PDF.js viewer options and parameters support, access to the viewer application instance
-- Ability to customize viewer styles and themes
-
-## How it works
+- PDF.js viewer options and parameters support, access the viewer application instance
+- Customize viewer styles and themes
 
-**⚠️ This is an important part, please read this FIRST !!!**
-
- **You should download and place the PDF.js prebuilt files in the project.**
-
-`pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer.
+## Docs
 
-The prebuilt comes with each PDF.js release. 
-All v4 and v3 [releases](https://github.com/mozilla/pdf.js/releases) are supported.
+[Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)
 
-Then specify the path to the directory with the `viewer-path` property (`/pdfjs` by default) and PDF file URL with `src` property (should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request)).
+[API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
 
-## Status
+[Usage with frameworks](https://alekswebnet.github.io/pdfjs-viewer-element/#demo)
 
-[![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
-[![Package Quality](https://packagequality.com/shield/pdfjs-viewer-element.svg)](https://packagequality.com/#?package=pdfjs-viewer-element)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/pdfjs-viewer-element)
+[Various usecases](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
 
 ## Support via Ko-fi
 
@@ -43,19 +36,22 @@ If you find `pdfjs-viewer-element` useful and want to support its development, c
 
 > ❤️ Your support helps with maintenance, bug fixes, and long-term improvements.
 
-## Docs
+## How it works
 
-[Getting started](https://alekswebnet.github.io/pdfjs-viewer-element/)
+**⚠️ This is an important part, please read this FIRST !!!**
 
-[API playground](https://alekswebnet.github.io/pdfjs-viewer-element/#api)
+ **You should download and place the PDF.js prebuilt files in the project.**
+
+`pdfjs-viewer-element` requires PDF.js [prebuilt](http://mozilla.github.io/pdf.js/getting_started/), that includes the generic build of PDF.js and the viewer.
 
-[Live examples](https://alekswebnet.github.io/pdfjs-viewer-element/#demo)
+The prebuilt comes with each PDF.js release. 
+All v4 and v3 [releases](https://github.com/mozilla/pdf.js/releases) are supported.
 
-[Demo pages](https://github.com/alekswebnet/pdfjs-viewer-element/tree/master/demo)
+Then specify the path to the directory with the `viewer-path` property (`/pdfjs` by default) and PDF file URL with `src` property (should refer to the [same origin](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request)).
 
 ## Install
 
-Using module bundlers:
+### Using module bundlers:
 
 ```bash
 # With npm
@@ -70,7 +66,7 @@ pnpm add pdfjs-viewer-element
 import 'pdfjs-viewer-element'
 ```
 
-Using browser:
+### Using browser and CDN:
 
 ```html
 <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>

demo/basic.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Basic demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/dark-theme.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Dark theme demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/extra-styles-urls.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Extra styles demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/extra-styles.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Extra styles demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/go-to-nameddest.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Disable font face demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/opened-findbar.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Opened find bar demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/pdf-data-load.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Basic demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;

demo/viewer-prebuilt-from-npm-package.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfjs-viewer-element | Viewer prebuilt from npm package demo</title>
-    <script type="module" src="./../../dist/pdfjs-viewer-element.js"></script>
+    <script type="module" src="https://cdn.skypack.dev/pdfjs-viewer-element"></script>
     <style>
       body {
         margin: 0;