SlideShare a Scribd company logo

Web components, so close!

•Download as PPTX, PDF•
•
Aleks Zinevych
Aleks Zinevych

What is web components, inner structure, how they are connected with each other, what is the current state of web components and what is their future

Related slideshows

Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5
 
Bundle Splitting in Volto
Bundle Splitting in VoltoBundle Splitting in Volto
Bundle Splitting in Volto
 
1 of 36
Web Components, so close! Oleksandr Zinevych Software Engineer at Datamart Inc.
Agenda • How our markup looks today? • Web Components will help us! • Inner structure • Simple web component live • Current state, known issues and future plans
How your frontend code looks like?
Web components, so close!
Main problems here • We have too many similar components in our web page that fall under the same semantic structure. To distinguish them from each other, we use classes, IDs, or other attributes. • The available list of semantic tags are simply not enough to target the wide variety of components that constitute our design. As a result, we fall back to traditional tags like div or span.
Web Components?
• Web Components are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications. • The intention behind them is to bring component-based software engineering to the WWW.
Web Components aren’t new! (1998) HTML Components - was proposed and implemented by Microsoft starting in IE5.5 (obsoleted in IE10). XBL(2001) and XBL2(2007) - was proposed by Mozilla as a companion to their XUL user-interface language.
Web Components TEMPLATES SHADOW DOM HTML IMPORT CUSTOM ELEMENTS <template id=“”> </template> div #document fragment span <link rel=“import” href=“doc.html”> <my-elem></my-elem>
Templates
• The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
• Its content is effectively inert until activated. • Script doesn't run, images don't load, audio doesn't play,...until the template is used. • Content is considered not to be in the document. • Templates can be placed anywhere inside of <head>, <body>, or <frameset> and can contain any type of content.
Activation of template
Gotchas, you need to remember • You cannot prerender a template(preload assets, process JS or etc.) • Avoid nested template because of activation.
Shadow DOM
DOM tree encapsulation • DOM nodes can already “host” hidden DOM • The hidden DOM cannot be accessed from outside JS • Styles defined in Shadow DOM are scoped by default
How can you see it?
Web components, so close!
• Shadow Host: is the DOM element which is hosting the Shadow DOM subtree or it is the DOM node which contains the Shadow Root. • Shadow Root: is the root of the DOM subtree containing the shadow DOM nodes. • Shadow DOM: allows for multiple DOM subtrees to be composed into one larger tree while rendering.
Web components, so close!
Lets create it!
Why Shadow DOM? • Separate your Content from Presentation (<content> tag) • Style and DOM encapsulation
Think about how you load HTML on the web?
HTML Import <iframe> AJAX Other Hacks?
How it looks?
Recommendations • Concatenate imports • Do not forget about browser caching • Imports block rendering(use async if needed)
Custom Elements
Simple creation
Advanced creation • You can extend both native and previously created custom elements:
Events • createdCallback – when an instance of the element is created • attachedCallback - when an instance was inserted into the document • detachedCallback – when an instance was removed from the document • attributeChangedCallback – when an attribute was added, removed, or updated
How it works?
Isn’t markup sexy?
Web Components are coming! • At the beginning it was just a Google intention. For now discussions about specifications are between Mozilla, Google, Apple, Microsoft. • The whole vision of Web Components is not fully realized and discussed by all browser vendors. But we can experiment with them now. • Web Components are a transformative step forward for the web
Browsers are not ready • Shadow DOM spec compromise • Custom elements, HTML Imports are still controversial • Templates are broadly supported
Future of Web Components Declarative shadow DOM Fully Isolated Components Accessibility primitives Unified native control styling CSS Parts styling Parser customization
Thanks for attention! • E-mail: aleksanderzinewicz@gmail.com • Twitter: @a_zinewicz • Facebook: @aleksander.zinewicz • Skype: oleksandr.zinevych@outlook.com

More Related Content

Web components, so close!

  • 1. Web Components, so close! Oleksandr Zinevych Software Engineer at Datamart Inc.
  • 2. Agenda • How our markup looks today? • Web Components will help us! • Inner structure • Simple web component live • Current state, known issues and future plans
  • 3. How your frontend code looks like?
  • 5. Main problems here • We have too many similar components in our web page that fall under the same semantic structure. To distinguish them from each other, we use classes, IDs, or other attributes. • The available list of semantic tags are simply not enough to target the wide variety of components that constitute our design. As a result, we fall back to traditional tags like div or span.
  • 7. • Web Components are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications. • The intention behind them is to bring component-based software engineering to the WWW.
  • 8. Web Components aren’t new! (1998) HTML Components - was proposed and implemented by Microsoft starting in IE5.5 (obsoleted in IE10). XBL(2001) and XBL2(2007) - was proposed by Mozilla as a companion to their XUL user-interface language.
  • 9. Web Components TEMPLATES SHADOW DOM HTML IMPORT CUSTOM ELEMENTS <template id=“”> </template> div #document fragment span <link rel=“import” href=“doc.html”> <my-elem></my-elem>
  • 11. • The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
  • 12. • Its content is effectively inert until activated. • Script doesn't run, images don't load, audio doesn't play,...until the template is used. • Content is considered not to be in the document. • Templates can be placed anywhere inside of <head>, <body>, or <frameset> and can contain any type of content.
  • 14. Gotchas, you need to remember • You cannot prerender a template(preload assets, process JS or etc.) • Avoid nested template because of activation.
  • 16. DOM tree encapsulation • DOM nodes can already “host” hidden DOM • The hidden DOM cannot be accessed from outside JS • Styles defined in Shadow DOM are scoped by default
  • 17. How can you see it?
  • 19. • Shadow Host: is the DOM element which is hosting the Shadow DOM subtree or it is the DOM node which contains the Shadow Root. • Shadow Root: is the root of the DOM subtree containing the shadow DOM nodes. • Shadow DOM: allows for multiple DOM subtrees to be composed into one larger tree while rendering.
  • 22. Why Shadow DOM? • Separate your Content from Presentation (<content> tag) • Style and DOM encapsulation
  • 23. Think about how you load HTML on the web?
  • 26. Recommendations • Concatenate imports • Do not forget about browser caching • Imports block rendering(use async if needed)
  • 29. Advanced creation • You can extend both native and previously created custom elements:
  • 30. Events • createdCallback – when an instance of the element is created • attachedCallback - when an instance was inserted into the document • detachedCallback – when an instance was removed from the document • attributeChangedCallback – when an attribute was added, removed, or updated
  • 33. Web Components are coming! • At the beginning it was just a Google intention. For now discussions about specifications are between Mozilla, Google, Apple, Microsoft. • The whole vision of Web Components is not fully realized and discussed by all browser vendors. But we can experiment with them now. • Web Components are a transformative step forward for the web
  • 34. Browsers are not ready • Shadow DOM spec compromise • Custom elements, HTML Imports are still controversial • Templates are broadly supported
  • 35. Future of Web Components Declarative shadow DOM Fully Isolated Components Accessibility primitives Unified native control styling CSS Parts styling Parser customization
  • 36. Thanks for attention! • E-mail: aleksanderzinewicz@gmail.com • Twitter: @a_zinewicz • Facebook: @aleksander.zinewicz • Skype: oleksandr.zinevych@outlook.com