/example-web-components

Component HTML Example to use WebComponent feature. Only Vanilla JS, No FW.

Primary LanguageJavaScript

Overview

Example WebComponent feature.

  • Split html file
  • Reuseble component
  • Scoped CSS

Installation

$ yarn
$ yarn http-server
$ open http://127.0.0.1:8080/

Explanation

  1. Create component file like /components/xxx-xxx.html.

    <div>Hello World!</div>

  2. Add component name(xxx-xxx) in main.js.

    • Working on customElements.define(...) in logic

  3. Use xxx-xxx component in index.html.

    <html>
  <xxx-xxx></xxx-xxx>
</html>

  4. Open index.html and then render 'Hello World!'.

Pros and cons

Pros

  • Easy way to use component as custom element.
  • No need 3rd party library.
  • Vanilla JavaScript and HTML.

Cons

  • Network latency would happen in this way because JavaScript try to fetch each component html files. If we bundled files into one file, such a problem wouldn't happen.

    Screen Shot 2021-01-29 at 15 29 08

  • Waiting time happen untill custome element load and render.

Example Cases:

# Case1
$ open examples/1/index.html

# Case2
$ yarn start
$ open http://localhost:8080/examples/2/index.html

# Case3
$ open examples/3/index.html

Why Use http-server

We cannot open .js file via .html because of security feature in browser.

REF