Downloaded 10 times
![.Web Components Made Of Rainbows
Set of cutting edge [draft] standards
proposed by Google that make it
possible to build secure reusable
widgets using web platform
technologies.](https://image.slidesharecdn.com/da-14webcomponentsv1-140819150125-phpapp01-140821062535-phpapp02/75/Web-Components-Web-back-to-future-5-2048.jpg)
![HTML Imports
index.html
import.html<script> … </script>
…
<div id="blog-post">...</div>
<head>
<link rel="import" href="/path/to/import.html">
</head>
<body>
…
</body>
var c = document.querySelector('link[rel="import"]').import; access content](https://image.slidesharecdn.com/da-14webcomponentsv1-140819150125-phpapp01-140821062535-phpapp02/75/Web-Components-Web-back-to-future-14-2048.jpg)
Uploaded byGlobalLogic Ukraine
Web Components: Web back to future.
The document discusses web components developed by Google, which consist of four main parts: templates, custom elements, HTML imports, and shadow DOM. It emphasizes the benefits of these components for code reusability, maintainability, and accessibility, along with best practices for implementation. The document also provides links to helpful resources and tutorials on web components.
More Related Content
Similar to Web Components: Web back to future.
Web Components: Web back to future.
- 1. <web-components> Web backto future </web-components> by Anna Khabibullina
- 2. .Agenda _ Web Componentsand their parts _ X-Browser Support _ Demo _ Best Practices
- 3. .About Me _ Co-founderof DA-14 Web Dev Team http://da-14.com _ Web Engineer http://sitecues.com _ Open Source Contributor http://github.com/akhabibullina _ Social Person http://twitter.com/_khabibullina
- 4. .What I workon _ SaaS application(assistive tool) _ (No) libraries _ No frameworks _ UX design matters _ Accessibility in mind .Welcome every problem as opportunity _ Better understanding _ R&D challenges _ Taking advantage of new technologies _ Experimental features _ X-browser support for modern browsers
- 5. .Web Components MadeOf Rainbows Set of cutting edge [draft] standards proposed by Google that make it possible to build secure reusable widgets using web platform technologies.
- 6. .Web Components Comprised offour parts: _ Templates _ Custom Elements _ HTML Imports _ Shadow DOM
- 7. Templates: Standardizing client-sidetemplating _ http://www.html5rocks.com/en/tutorials/webcomponents/template _ Why? : Maximize code reusability and maintainability. _ How? : Declare inert chunks of cloneable DOM with <template>.
- 8. Templates _ Inert markup <table> <tr> <templateid="cells-to-repeat"> <td>Some content!</td> </template> </tr> </table> _ Activate template var t = document.querySelector('template').content; var clone = document.importNode(t, true); document.body.appendChild(clone);
- 9. .Web Components Templates Custom Elements HTMLImports Shadow DOM
- 10. Custom Elements: Sexymarkup _ http://www.html5rocks.com/en/tutorials/webcomponents/customelements _ Why? : There is nothing modern in <div> soup. _ How? : Define new types of HTML elements and their APIs.
- 11. Custom Elements _ JavaScript varCustomElementProto = Object.create(HTMLElement.prototype); var XFoo = document.registerElement('x-custom-da-14', { prototype: CustomElementProto }); var xfoo = new XFoo(); document.body.appendChild(xfoo); _ HTML <x-custom-da-14></x-custom-da-14>
- 12. .Web Components Templates Custom Elements HTMLImports Shadow DOM
- 13. HTML Imports: Simpleway to load HTML elements _ http://www.html5rocks.com/en/tutorials/webcomponents/imports _ Why? : The web's most basic content, HTML, requires the greatest amount of effort to work with. _ How? : Import HTML components via <link rel="import">.
- 14. HTML Imports index.html import.html<script> …</script> … <div id="blog-post">...</div> <head> <link rel="import" href="/path/to/import.html"> </head> <body> … </body> var c = document.querySelector('link[rel="import"]').import; access content
- 15. HTML Imports Yo dawg.I hear you like imports, so I included an import in your import.
- 16. .Web Components Templates Custom Elements HTMLImports Shadow DOM
- 17. Shadow DOM: Separatingcontent from presentation _ Why? : DOM tree encapsulation problem. _ How? : Think about DOM hosting DOM, which hosts more DOM. _ http://www.html5rocks.com/en/tutorials/webcomponents/sh adowdom
- 18. Shadow DOM _ Videoplayer <video controls="" autoplay="" name="media"> <source src="http://localhost:1000/media" type="audio/mpeg"> </video>
- 19.
- 20. .Web Components Templates Standardizing client-sidetemplating Custom Elements Sexy markup HTML Imports Simple way to load HTML elements Shadow DOM Separating content from presentation
- 21.
- 22. .Best Practices _ Namespacing(bower.io,customelements.io) _ Mimic built-in elements as closely as possible _ Don't put too much in Shadow DOM _ Don't create more custom elements than you need ….. _ Accessibility _ Performance _ Testing _ http://webcomponents.org/articles/web-components-best- practices/
- 23. .X-Browser Support _ http://jonrimmer.github.io/are-we-componentized-yet/ _X-TAG http://x-tags.org/ _ POLYMER http://www.polymer- project.org/ _ BOSONIC http://bosonic.github.io/
- 24. .Demo _ CUSTOMELEMENTS.IO A galleryto display Web Components created by the community. http://customelements.io/ _ COMPONENT KITCHEN Component catalog for a mainstream HTML audience. http://component.kitchen/ http://html5-demos.appspot.com/static/webcomponents/index.html#1
- 25. .Web Components SupportingCast: Awesome Future Web _ document.querySelectorAll() _ Object.observe() _ MutationObserver _ CSS variables, calc() http://wiki.ecmascript.org/doku.php?id=harmony:observe
- 26. .Your turn…Discover! .Your turn…Discover!
- 27. .Useful links _ http://www.w3.org/wiki/WebComponents/ _http://webcomponents.org/ _ http://habrahabr.ru/post/210058/ _ http://css-tricks.com/modular-future-web-components/ _ http://webcomponents.org/presentations/accessibility-of-web- components-at-jsconf-us/ _ https://www.youtube.com/watch?v=2txPYQOWBtg _ http://www.youtube.com/watch?v=eJZx9c6YL8k _ http://jonrimmer.github.io/are-we-componentized-yet/ _ http://w3c.github.io/webcomponents/spec/custom/#es6
Editor's Notes
- #4 Кто такая я и почему я сейчас рассказываю про веб компоненты…
- #5 Если описание моего проекта перекликается с вашим, то это значит, что вам тоже можно присмотреться к web components.
- #7 Все 4 части можно использовать отдельно, но
- #8 Тема шаблонизации в Вебе не нова, бекенд - фронтенд.
- #9 Контент шаблона не находится в ДОМе, все запросы querySelector() или getElementById() не выберут детей Можно разместить где угодно в документе <head>, <body>, or <frameset
- #12 Чтобы избежать конфликтов, согласно стандарту, кастомные элементы должны содержать дефис в своём названии. По-умолчанию они наследуют HTMLElement.
- #14 Простое АПИ, которое давно должно было появится.
- #15 CORS
- #16 Простое АПИ, которое давно должно было появится.
- #19 http://localhost:1000/media
- #20 http://html5-demos.appspot.com/shadowdom-visualizer
- #21 Темплейты - фрагменты HTML, которые программист собирается использовать в будущем. Custom позволят писать модульный, удобочитаемый код на высоком уровне. HTMl Imports Импорт фрагментов разметки из других файлов. Shadow DOM - Инструмент инкапсуляции HTML.
- #22 Темплейты - фрагменты HTML, которые программист собирается использовать в будущем. Custom позволят писать модульный, удобочитаемый код на высоком уровне. HTMl Imports Импорт фрагментов разметки из других файлов. Shadow DOM - Инструмент инкапсуляции HTML.
- #25 http://localhost:8000/site/chess-test/bower_components/chess-board/index.html
- #27 На мой взгляд, Web Components — это следующий шаг. Разработчики смогут создавать интерактивные виджеты. Их легко поддерживать, переиспользовать, интегрировать. Изучайте и дерзайте!