How to separate web components to individual files and load them?

by

In the main file, use <script> to load the Javascript file x-counter.js.

In the Javascript file, use fetch() to load the HTML code x-counter.html.

In the HTML file, use <link rel="stylesheet"> to load the CSS file x-counter.css.

CSS file : x-counter.css 

button, p {
    display: inline-block;
    color: dodgerblue;
}

HTML file : x-counter.html

<link rel="stylesheet" href="https://stackoverflow.com/questions/55080103/x-counter.css">
<button aria-label="decrement">-</button>
    <p>0</p>
<button aria-label="increment">+</button>

Javascript file : x-counter.js

fetch("x-counter.html")
    .then(stream => stream.text())
    .then(text => define(text));

function define(html) {
    class XCounter extends HTMLElement {
        set value(value) {
            this._value = value;
            this.valueElement.innerText = this._value;
        }

        get value() {
            return this._value;
        }

        constructor() {
            super();
            this._value = 0;

            var shadow = this.attachShadow({mode: 'open'});
            shadow.innerHTML = html;

            this.valueElement = shadow.querySelector('p');
            var incrementButton = shadow.querySelectorAll('button')[1];
            var decrementButton = shadow.querySelectorAll('button')[0];

            incrementButton.onclick = () => this.value++;
            decrementButton.onclick = () => this.value--;
        }
    }

    customElements.define('x-counter', XCounter);
}

Main file : index.html

<html>
<head>
    <!-- ... -->
    <script src="https://stackoverflow.com/questions/55080103/x-counter.js"></script>
</head>
<body>
    <x-counter></x-counter>
</body>
</html>

More Related Contents:

  1. How to get element in user-agent shadow root with JavaScript?
  2. Is it possible to access Shadow DOM elements through the parent document?
  3. Opening new window in HTML for target=”_blank”
  4. How to create new instance of an extended class of custom elements
  5. How to communicate between Web Components (native UI)?
  6. Load HTML template with JavaScript
  7. Use of Template with HTML Custom Elements
  8. Dynamic page load can’t load Java with page
  9. Why I have to put all the script to index.html in jquery mobile
  10. Replacing css file on the fly (and apply the new style to the page)
  11. THREE.js Ray Intersect fails by adding div
  12. How to include multiple js files using jQuery $.getScript() method
  13. Performance of MutationObserver to detect nodes in entire DOM
  14. jquery submit form and then show results in an existing div
  15. Programmatically play video with sound on Safari and Mobile Chrome
  16. time delayed redirect?
  17. HTML – how can I show tooltip ONLY when ellipsis is activated
  18. Can I run HTML files directly from GitHub, instead of just viewing their source?
  19. JS – window.history – Delete a state
  20. Embed an External Page Without an Iframe?
  21. How to change active class while click to another link in bootstrap use jquery?
  22. Sending message to a specific connected users using webSocket?
  23. How to access the content of the “embed” tag in HTML
  24. What are the possible ways to hide an element via CSS [closed]
  25. search data from html input in mysql
  26. Waiting for dynamically loaded script
  27. Styling Vuetify selectors
  28. Is it possible to make input fields read-only through CSS?
  29. Freeze Header until Irrelevant (HTML, CSS and JS)
  30. Decode HTML entity in Angular JS

Leave a Comment