Web Component 3

PolymerJS Auto Binding Example

PolymerJS provides an enhanced version of Template element with auto binding. In this demo,"We will check an use of auto binding for a template element". Below code shows an example of IS attribute with auto-binding value.Normally template elements are not visible built by using auto binding, on page load the template HTML content is makes […]

Developing and Styling Shadow DOM Elements

:host and ::shadow pseudo selector can be used to style the HTML element inside shadow root. A shadow root can be created using createShadowRoot() method. In this demo, "We will create a custom element and style the HTML present inside shadow DOM". A custom element can be referred in 2 ways.Inside its template it […]

Indtroducing Chrome Development Editor

Chrome provides a very light weight development editor.This editor is now in beta version. This editor can be downloaded from below URL. https://chrome.google.com/webstore/detail/chrome-dev-editor-develop In this Demo, “We will explore this Chrome Developer Editor“. Below screenshot shows creating new project popup window. Below screenshot shows the supported project types by this […]

Resolving Polymer ReferenceError Platform is not defined

While coding for Polymer JavaScript library for web component you will face an exception “ReferenceError Platform is not defined”, though all the library are included properly. In this Demo, “We will see How it occurs and its solution “. Below screen shot shows the chrome inspect of loaded HTML of a sample polymer code.You can […]