Polymer and web component
-
Upload
imamrazaansari -
Category
Technology
-
view
137 -
download
2
Transcript of Polymer and web component
![Page 1: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/1.jpg)
web component and
polymerSpeaker: Imam Raza
GDG Karachi Event 24th January
![Page 2: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/2.jpg)
Web components are a collection of
specifications that enable developers to
create their web applications as a set of
reusable components.
What are web component?
![Page 3: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/3.jpg)
● Custom Elements
● HTML templates
● Shadow DOM
● HTML imports
Web component composition
![Page 4: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/4.jpg)
Enable developers to create their own
elements that are relevant to their design
as part of the DOM structure with the
ability to style/script them just like any
other HTML tag.
Custom Elements
![Page 5: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/5.jpg)
Custom element Example
![Page 6: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/6.jpg)
Let developer define fragments of markup
that stay consistent across web pages with
the ability to inject dynamic content using
JavaScript.
HTML Templates
![Page 7: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/7.jpg)
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
HTML templates example
![Page 8: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/8.jpg)
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
HTML templates example
![Page 9: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/9.jpg)
Abstract all the complexities from the
markup by defining functional boundaries
between the DOM tree and the subtrees
hidden behind a shadow root.
CSS styles defined inside a Shadow Root
won't affect its parent document, CSS
styles defined outside the Shadow Root
won't affect the main page
Shadow DOM
![Page 10: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/10.jpg)
Shadow DOM
![Page 11: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/11.jpg)
<div id="host"></div>
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow
Root
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div); // Append elements to the Shadow
Root
Shadow DOM example
![Page 12: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/12.jpg)
● For CSS we have <link rel="stylesheet">
● For JS we have <script src=””>
● For image its <image src=””>
● For HTML ? iFrame? AJAX?
HTML Imports
![Page 13: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/13.jpg)
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import"
href="http://example.com/elements.html">
HTML imports Examples
![Page 14: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/14.jpg)
Browser Support
![Page 15: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/15.jpg)
Custom Elements
![Page 16: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/16.jpg)
Html Imports
![Page 17: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/17.jpg)
Shadow DOMs
![Page 18: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/18.jpg)
HTML templates
![Page 19: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/19.jpg)
Polymer provides a set of polyfills that
enables us to use web components in non-
compliant browsers with an easy-to-use
framework
Here Comes Polymer
![Page 20: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/20.jpg)
● Allow us to create custom elements with
user defined naming schemes.
● Allowing each custom element to have
its own template
● Providing a suite of ready made UI
How Polymer did this
![Page 21: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/21.jpg)
● bower install --save Polymer/polymer
Installing Polymer
![Page 22: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/22.jpg)
● create index.html
● include platform.js
<script
src="bower_components/platform/platfo
rm.js"></script>
Installing polymer
![Page 23: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/23.jpg)
Download and install custom
element
![Page 24: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/24.jpg)
![Page 25: Polymer and web component](https://reader034.fdocuments.net/reader034/viewer/2022042716/55a69b201a28abe07d8b45ad/html5/thumbnails/25.jpg)
Vulcanize inlines all your HTML imports,
flattens their dependencies, and produces
an output that generates far fewer network
requests.
Vulcanize