Menu
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?
841
What are Web Components? Web components are custom, reusable web elements which encapsulate functionality, markup structure and styling by using vanilla javascript/HTML/CSS along with native Web APIs. Custom elements teach the browser new tricks while preserving the benefits of HTML.
Getting Started With Web Components. Web Components are custom HTML elements such as <hello-world></hello-world> . The name must contain a dash to never clash with elements officially supported in the HTML specification. You must define an ES2015 class to control the element.
They offer cross-platform development and ensure brand consistency. Web components allow us to break up a complex web app into reusable pieces that will reliably look and function the same, regardless of what they share a page with.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
