web component and
polymer
Speaker: Imam Raza
GDG Karachi Event 24th January
Web components are a collection of
specifications that enable developers to
create their web applications as a set of
reus...
● Custom Elements
● HTML templates
● Shadow DOM
● HTML imports
Web component composition
Enable developers to create their own
elements that are relevant to their design
as part of the DOM structure with the
abi...
Custom element Example
Let developer define fragments of markup
that stay consistent across web pages with
the ability to inject dynamic content ...
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
HTML templates example
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo....
Abstract all the complexities from the
markup by defining functional boundaries
between the DOM tree and the subtrees
hidd...
Shadow DOM
<div id="host"></div>
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow
R...
● For CSS we have <link rel="stylesheet">
● For JS we have <script src=””>
● For image its <image src=””>
● For HTML ? iFr...
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
<!-- Resources on other origins must be CORS-enabled...
Browser Support
Custom Elements
Html Imports
Shadow DOMs
HTML templates
Polymer provides a set of polyfills that
enables us to use web components in non-
compliant browsers with an easy-to-use
f...
● Allow us to create custom elements with
user defined naming schemes.
● Allowing each custom element to have
its own temp...
● bower install --save Polymer/polymer
Installing Polymer
● create index.html
● include platform.js
<script
src="bower_components/platform/platfo
rm.js"></script>
Installing polymer
Download and install custom
element
Vulcanize inlines all your HTML imports,
flattens their dependencies, and produces
an output that generates far fewer netw...
Polymer and web component
of 25

Polymer and web component

Polymer and web component presentation held under Google Developer Group Karachi @ 24th January 2015 at Nest IO
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Polymer and web component

  • 1. web component and polymer Speaker: Imam Raza GDG Karachi Event 24th January
  • 2. 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?
  • 3. ● Custom Elements ● HTML templates ● Shadow DOM ● HTML imports Web component composition
  • 4. 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
  • 5. Custom element Example
  • 6. Let developer define fragments of markup that stay consistent across web pages with the ability to inject dynamic content using JavaScript. HTML Templates
  • 7. <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> HTML templates example
  • 8. 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
  • 9. 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 Shadow DOM
  • 10. Shadow DOM
  • 11. <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
  • 12. ● For CSS we have <link rel="stylesheet"> ● For JS we have <script src=””> ● For image its <image src=””> ● For HTML ? iFrame? AJAX? HTML Imports
  • 13. <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
  • 14. Browser Support
  • 15. Custom Elements
  • 16. Html Imports
  • 17. Shadow DOMs
  • 18. HTML templates
  • 19. 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
  • 20. ● 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
  • 21. ● bower install --save Polymer/polymer Installing Polymer
  • 22. ● create index.html ● include platform.js <script src="bower_components/platform/platfo rm.js"></script> Installing polymer
  • 23. Download and install custom element
  • 24. Vulcanize inlines all your HTML imports, flattens their dependencies, and produces an output that generates far fewer network requests. Vulcanize

Related Documents