Architecture decision records - How not to get lost in the past
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
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.
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
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.
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