Login/Register
Vanilla hello world app using web components
Asked Answered
Solved javascripthtmlweb-componentcustom-element
A

2

6

I'm trying to build a simple web component without any external dependencies. Just two html files, one index.html and one webcomponent.html.

I have some personal html projects where I'd like to separate out the global html namespace into smaller files. I do not want ot use any external library like polymer for this. Neither I want to use any build system or webserver.

All the examples I found online either need an external build system or a library. Also they don't tend to work without a webserver. For instance, webcomponents/hello-world claims to use vanilla-js. But in fact, it does not as it depends on Bower.

Just two html files which work in my local edit-save-refresh development cycle. Is this actually possible? If so, how? If not, what's the closest compromise possible?

Angevin answered 5/12, 2016 at 17:5 Comment(2)
Bower is a package manager. The component itself doesn't depend on Bower, but rather its build system that does. The project uses Bower to download the webcomponents polyfill. You'll notice that the component's source contains only vanilla JS. – Dissuasion
If you provide an example including Bower, the example is dependent on Bower. It doesn't matter if Bower is used for code or just a build. So the component indeed does not depend on Bower, but the example does. – Angevin
L
7

Here is a minimal Custom Element example with 2 files:

1. Create your custom elemnt in a separate file, for example hello-world.js:

class HelloWorld extends HTMLElement {
    connectedCallback () {
        this.innerHTML = 'hello, world!'
    }
}
customElements.define( 'hello-world', HelloWorld )

2. Import and use your custom element in the main, index.html file:

<html>
<head>
    <script src='hello-world.js'></script>
<body>
    <hello-world></hello-world>
Letaletch answered 5/12, 2016 at 22:47 Comment(2)
HTML import is not supported anymore, and may never be :#34409380 – Bibb
@Bibb You're right. Now we should package the Custom Element definition in a Javascript file instead. I will update the answer soon – Letaletch
C
2

Code:

class HelloWorld extends HTMLElement {
    constructor() {
      super();
      // Attach a shadow root to the element.
      let shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = `<p>hello world</p>`;
    }
  }
  customElements.define('hello-world', HelloWorld);
  <hello-world></hello-world>
Chamois answered 13/12, 2020 at 16:27 Comment(2)
what is shadow root? why is it used? – Yetah
@Yetah The shadow root contains the shadow dom, html markup, css and javascript, that is separate from the main html page and inaccessible, mostly, from it. Inside the shadow root one can use id's and css that will not clash with elements in the main html. The web component then becomes a blackbox. CSS custom properties though can pierce the shadow root therefore allowing for theming and web components to take on the look and feel of the web page as a whole. – Outofdoors

© 2022 - 2024 — McMap. All rights reserved.