Trying Native Web Components with ES6

Custom Elements API

Files under this section are:

• LifeCycle Methods in CustomElements API [Open console and reload]
• Custom Methods in Elements [Open console and reload]
• Modify Existing Elements, Custom Anchor Tag [Shows a confirm message before opening the link]

Further reading: Custom Elements v1

Shadow DOM

Files under this section are:

• Creating Shadow DOM [Right click on the blue paragraph to see Shandow DOM in action]

Further reading: Shadow DOM v1

HTML Templates

Files under this section are:

• Creating a Template and Uisng it [Inspect the list to see HTML Templates in action]

Further reading: HTML's New <template>

HTML Imports

Files under this section are:

• Importing HTML Contents [Inspect the document and check the network tab]

Further reading: HTML Imports

Method I of writting web components

I'll be using this method from now onwards

Using separate JS file

Pros

• Todo

Cons

• Todo

Method II of writting web components

Using HTML Imports

Pros

• Todo

Cons

• Todo

BestPractices

Covered in random quote component.

Components

RandomQuotes Component

• Displays a quote every 10s