Polymer.js Interview Questions & Answers

Question 1. What Is Polymer.js?

Answer :

Polymer.js is an open source JavaScript library. It is developed by Google. It is used to develop web applications for using of web components like HTML

Question 2. Describe Architecture Of Polymer.js?

Answer :

The architecture of Polymer.js is divided into four important layers:

Native Layer- It represents the current state of browser support and implementation for the web component detail.

Foundation Layer- It consists polyfill libraries for the web component details. Polyfill is a code that implement the feature of web browser that does not support the feature.

Core Layers- It contains the Polymer library code which is found in polymer.html file.

Elements Layers- It consists of core and paper elements.

Question 3. What Are The Features Of Polymer.js?

Answer :

Following are the features of Polymer.js:

• It is simplest way to create custom elements.
• It has both One-way and Two-way data binding.
• It provides polyfills for creating it's own customized elements.
• It has computed properties.
• It provides gesture events.

Question 4. What Are The Polymer Elements?

Answer :

It provides elements that we can use in our web pages and applications. These elements are built with the Polymer library.

Question 5. Name The Types Of Polymer Elements?

Answer :

Following are the types of polymer elements:

App element- It is used, when we build entire application.

Iron element- It is used to create basic building blocks of an application.

Paper element- It is a set of UI (User Interface) elements that implement the material design system.

Gold elements- This element is build for e commerce.

Neon element- It is used for animation-related elements.

Platinum elements- This element is like application features, like push notifications, offline caching and bluetooth.

Question 6. What Is Custom Elements?

Answer :

It provide a component model for the web.

Question 7. What Are The Features Provided By Custom Elements?

Answer :

Custom elements provides the following features:

• It provides a mechanism for associating class with custom element name.
• It requests the lifecycle methods when we change the state of custom element object.
• It requests for the method when we change the attribute of an instance.

Question 8. What Are The Reactions Apply In Custom Elements Life Cycle?

Answer :

It provides the set of custom element reactions that allows to change in elements lifecycle.

Reactiom->Description

Constructor:It is called when element is upgraded.

Connected Callback:It is called when element is added to a document.

Disconnected Callback:It is called when element is removed to a document.

AttributeChanged Callback:It is called when element is change, append, remove or replace.

Question 9. What Are Events In Polymer.js?

Answer :

Event is something that happens at specific time and lead to some changes. polymer.js provides own methods to perform events like: on-click, on-tap, on-mouseover etc. we can also create our own custom events.

It also provides listener objects that can be used to bind events to execute functions.

Question 10. What Is Data System In Polymer.js?

Answer :

In Data system, polymer.js allows us to observe changes on an element's properties by taking different actions.

Data system actions include following properties:

Observers: It invokes specified method whenever data changes.

Computed properties: It computes the virtual properties which is based on other properties and recompute when the input data change.

Data binding: By using of annotation we can update the properties, attributes or text content whenever data changes.

Question 11. What Is Shadow Dom?

Answer :

Shadow DOM is a new DOM (Document Object Modeling) features Which is used for Building component.

Question 12. What Is Shadow Dom Styling?

Answer :

It is a process of styling shadow DOM by using style properties. It inherits properties from host to shadow tree.

Let's see an example.

Shadow DOM Style Example:

my demo {background-color:grey;}  

</style>  

<my-element>  

#shadow-root  

<style>  

//this div will have blue background color  

div { background-color: orange; }  

</style>  

<div class="mydemo">Demo</div>