Skip to main content

Web components

Introduction


Did you ever came across a situation when you created a really nice UI component for an application and wanted to use it in another application but both application were using an entirly different framework due to which it was difficult for you to port the component from one application to the other. 

Web components are set of web APIs that allows you to create custom, reusable components for web applications. These custom components add in the HTML vacabulary and can be used in any Javascript library or framework. So they let developers easily extend HTML with new elements.

Magic behind the elements

So how are we as developers are enable to create new custom elements and use them anywhere we want. If you run your developer console and run following


window.customElements

You will find a bunch of properties and mathods. I am sure you have a clue about how you can extend your browser's html vacabulary.

Defining a new HTML element

Custom elements are nothing but simple Javascript classes that extend base HTMLElement class. Following are the steps to create a new simple custom element

  • Create Javascript element by creating a new class that extends HTMLElement.

    class MyCustomComponent extends HTMLElement { ... }
  • Add the newly created element in the list of custom components
    window.customElements.define ('my-custom-element', MyCustomElement);
  • That's it, you can now add the component in any application by using following tag
    <my-custom-element></my-custom-element>






Comments

Post a Comment

Popular posts from this blog

Html5 Canvas Drawing -- Draw dotted or dashed line

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU...
Post a Comment
Read more

Difference between ng-template, ng-content and ng-container

While working on a very complex feature for a client in which I had to present hierarchical dynamic data in three column layout with ability to expand like google image search on each level, I came across ng-content, which seemed like a perfect fit for the solution I was thinking about implementing. But I got confused between ng-content and ng-container when I saw the generated html while debugging my code in developer console. I further investigated both ng-content and ng-container and decided to write my finding here in my blog for future references. If you are also wondering what are they for, read on. <ng-container> When you have to write different host elements to combine many structural component like the following <div *ngIf="condition"> <div *ngFor="..."> Some content here </div> </div> You get many unintentional host elements which are not required for your layout. It becomes a prolem when you have complex appl...
Post a Comment
Read more

Grouping Exports in Javascript code

As a Javascript developer, you will come across many occassions when you will have to export many functions, variables or other items from one file and import them in different files. You may end up with a code like the following export const function1 = () => { /*something here */ } ; export const function2 = () => { /*something here */ } ; export const function3 = () => { /*something here */ } ; export const function4 = () => { /*something here */ } ; export const function5 = () => { /*something here */ } ; export const function6 = () => { /*something here */ } ; export const function7 = () => { /*something here */ } ; And in the file you want to import you will be importing like the following import { function1, function2, function3, function5, function6, function7 } from './path_to_the_script' You can improve it using * if you want to import all the functions. import * as Functions from './path_to_the_script' This is a better way of imp...
Post a Comment
Read more