Intro to Web Components

This repository can be use as an introduction to web components, it shows how each API is used and what it adds to the web component standard.
Explore the docs »

Report Feature/Bug

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • WebComponentsAPI
  • LitElement
• License
• Contact
• Acknowledgements

About The Project

The purpose of this project is to give a easy and simple introduction to Web Components (their API), and to LitElement and how you can create new Web Components using this library.

Built With

• Node and NPM
• LitElement
• lit-html
• Web Components Introduction
• Open WC

Getting Started

This project has two parts:

• Basic intro to web components.
• Creating web components using LitElement.

For the first you just need to clone the project and open the index.html file which you can find inside WebComponentsAPI folder.

In the case of the second part you will need nodejs installed in your machine, with this you will be able to install LitElement library and a dev server to be able to develop your web components easily.

Prerequisites

1. Install nodejs for the second part, just go to https://nodejs.org/ and install it.
2. (Optional) Configure your .npmrc file in case you need to install packages using npm from a private repository (https://docs.npmjs.com/configuring-npm/npmrc.html).

Installation

1. Clone the repo

git clone https://github.com/igomezal/IntroToWebComponents

2. Navigate to LitElement folder

cd LitElement

3. Install the dependencies

npm install

Usage

Before using it you should check if the browser you plan to use supports web components, just check Can I Use Custom Elements, if your browser is not supported then you will have to add polyfills in order for it to work in unsupported browser: Web Component Polyfills

WebComponentsAPI

Open the folder WebComponentsAPI with the IDE you prefer to use, a really good one you can is vs code, and then open the index.html file in a browser and you should be able to see one of the examples, if you want to test any other example just comment the previous web component and its import and uncomment the web component and the import you want to use and refresh the page.

LitElement

Open the folder LitElement with the IDE you prefer to use and then run npm start to start the dev server, it should open the default browser and load the index.html located inside LitElement folder, each time you change anything inside the LitElement folder the page should reload itself.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Iván Gómez Alonso - @ivanusatuiter - [email protected]

Project Link: https://github.com/igomezal/IntroToWebComponents

Acknowledgements

• LitElement
• lit-html
• Web Components Introduction
• Open WC
• Stencil
• Lion Web Components
• Polymer
• Slim.js
• Shoelace