Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


 
 

Build Reusable Widgets with Web Components

Posted by Sandeep Chanda on Nov 3, 2014

Web Components are redefining the way you build for the web! They are touted to be the future of web development and are definitely showing a lot of promise. Web Components allow you to build widgets that can be used reliably and will be resilient to changes in the future—as opposed to the current approach of building them using HTML and JavaScript.

The real issue in the current approach with HTML and JavaScript is that the widgets that are build using them are not truly encapsulated in the DOM from one another, leading to cross references and ultimately errors in the rendered layout. You cannot easily isolate content from the widget presentation, making it difficult to build widgets that can be reused in a reliable fashion.

Web Components expose some powerful features like Shadow DOM and Templates that are built for DOM encapsulation and reuse in the form of widget templates allowing you to separate content from the infrastructure. Note that Web Components are designed around HTML and JavaScript, so there is no new skill you need to learn to start leveraging them right away.



Shadow DOM is comprised of a feature called shadow root to support the DOM encapsulation process. Browsers supporting Web Components (e.g. Chrome 35+) recognize a JavaScript method called createShadowRooton HTML elements that allows the element to update its content by overriding the predefined content from the static mark-up. This is used in conjunction with new supported tags like template and content to create reusable widgets. Here is an example in code:

<template id="detailsTagTemplate">
<style>
…
</style>
<div class="details">
<content></content>
</div>
</template>

The JavaScript code will look like:

document.querySelector('#detailsTag').textContent = [your message goes here]; 

This can create magic by dynamically allowing you to project different content inside the details DIV tag. The template element is never rendered and the content tag replaces the text content with your message. This combination opens up a plethora of opportunities, letting you create reusable widgets and use them in your applications without having to worry about cross references.

TAGS:

Web development, JavaScript, widgets, HTML 5


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Recent Entries

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date