Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Web Components a New Perspective to Web Development

DZone's Guide to

Web Components a New Perspective to Web Development

This new concept it was created jointly by Firefox and Google and promises change to some paradigms. Learn more here!

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

This new concept it was created jointly by Firefox and Google and promises change to some paradigms.

Image title

"The component model for the Web called Web Components consists of four pieces designed to be used together to let web application authors define widgets with a level of visual richness not possible with CSS alone, and ease of composition and reuse not possible with script libraries today."

Web Components consist of 4 proposals: 

1. Templates

Templates are parts of DOM that could be reusable, and this Templates will be append to the DOM. That means <img> sources are not downloaded, scripts are not executed until necessary, saving on bandwidth and processing ,and also the script necessary to execute this component in this example querySelector is hidden on the Template to avoid influencing in the other part of the page.

Demohttp://jsfiddle.net/warpech/7y6kp/

2.Shadow DOM

Shadow DOM provides encapsulation to markup and style, for example, a <video> tag , this tag has many scripts to provide functionality . Each of those controls is implemented as a <div> inside of the <video> tag that is actually not accessible for the scripts on the page but is rendered on users' screen.

Shadow DOM is a tool that provides to web developer create own component like tag <video> or <img>.

Demohttp://jsfiddle.net/Wnsf6/

3.Custom Elements 

Custom Elements can react to the DOM lifecycle events. That enables them to have a certain behavior when they are added to DOM, their attributes change or they are removed from DOM.

Is possibility to create own first-class DOM members (fist-class DOM could be considered <div>,<p>,<br> etc ... ).

Demohttp://jsfiddle.net/7y6kp/7/

4.Imports 

Imports load external resources, such as Templates or Custom Elements. Imported HTML files can contain templates, stylesheets, and scripts. They get executed when the import is loaded.

Why do I care about this? 

  • You are a HTM user, this will help you do more advanced this easily.
  • You are a front end dev, you want to reuse components across pages.
  • You build single pages apps and want a better way to organize things.
  • You are interested in the direction that the web platform is heading.

Unfortunately, these components were available just to Google Chrome Canary or for test in jsFiddle.

But is possible use Polymer or Component Kitchen to use web components in another browser.

Here is a good presentation.

Here is a site with discussions and best-practices:  http://webcomponents.org

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web ,html

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}