Web components
Download as PPTX, PDF0 likes136 views
The document discusses web components and Polymer as a potential future web UI standard, highlighting their current support and features in different browsers. It details concepts such as custom elements, shadow DOM, HTML imports, and templates, emphasizing their capabilities for building modular web applications. The summary indicates that Google and Mozilla support these technologies, positioning them for significant impact in mobile and web development.
1 of 9
Download to read offline
Web components
- 1. Web Components (and Polymer) A Future Web UI Standard (?)
- 2. Web Components W3C Standard Custom Elements Shadow DOM HTML Imports HTML Templates (Native) Support in Chrome and Opera Partial support in Firefox; none in IE Polymer provides polyfills for Firefox and IE
- 3. Custom Elements Tags are hyphenated e.g. <diig-login user=”jbloggs”></diig-login> Should be able to mix elements from different libraries <my-polymer-element> <my-xtag-element></my-xtag-element> </my-polymer-element> Extend existing elements through inheritance
- 4. Shadow DOM Web page in a web page Unaffected by main page, CSS, etc. unless you specify. Like IFRAME
- 5. HTML Templates Inert piece of HTML Parameterised (for, if, etc.) <template></template> Can be nested
- 6. HTML Imports Bundled Pieces of HTML Links, JS, etc. <link rel="import" href="/components/color-element.html">
- 7. Polymer From Google Uses Data-binding (like AngularJS), one-way and two-way: <diig-login user=”{{userName}}”></diig-login> Prefers declarative to programmatic (less JS) Aimed at Mobile Apps (“folding” components, offline: platinum-ws)
- 8. Demo
- 9. Summary It is/will be a standard. Supported by Google and Mozilla (~⅔ browser market) Currently Polymer (Google) and X-Tags (Mozilla) API as components? <diig-document-storage auto type=”s3storage” url=”our/s3/storage”> <pdf-loader></pdf-loader> </diig-document-storage>