I'm trying to build a simple web ponent without any external dependencies. Just two html files, one index.html and one webponent.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, webponents/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 promise possible?
I'm trying to build a simple web ponent without any external dependencies. Just two html files, one index.html and one webponent.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, webponents/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 promise possible?
Share Improve this question edited Dec 24, 2016 at 15:46 Supersharp 31.3k11 gold badges102 silver badges147 bronze badges asked Dec 5, 2016 at 17:05 RuudjahRuudjah 8577 silver badges28 bronze badges 2-
2
Bower is a package manager. The ponent itself doesn't depend on Bower, but rather its build system that does. The project uses Bower to download the
webponentspolyfill. You'll notice that the ponent's source contains only vanilla JS. – tony19 Commented Dec 5, 2016 at 18:15 - 2 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 ponent indeed does not depend on Bower, but the example does. – Ruudjah Commented Dec 8, 2016 at 14:43
2 Answers
Reset to default 7Here 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>
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>