web components, so close!
TRANSCRIPT
Web Components, so close!
Oleksandr ZinevychSoftware 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?
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?
• 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.
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 ComponentsDeclarative shadow DOM
Fully Isolated Components
Accessibility primitives
Unified native control styling
CSS Parts styling
Parser customization
Thanks for attention!• E-mail: [email protected]• Twitter: @a_zinewicz• Facebook: @aleksander.zinewicz• Skype: [email protected]