Web components, so close!
Download as PPTX, PDF1 like530 views
The document discusses the challenges of front-end development, particularly the limitations of current semantic tags and the potential of web components to address these issues. Web components, being a set of standards that enable the creation of reusable components, are examined through various aspects like templates, shadow DOM, and custom elements, emphasizing their transformative potential for web development. Despite ongoing discussions among major browser vendors, the document highlights that web components can already be experimented with, although full browser readiness and specification agreement are still pending.
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>
- 10. Templates
- 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.
- 15. Shadow DOM
- 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.
- 21. Lets create it!
- 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?
- 25. How it looks?
- 26. Recommendations • Concatenate imports • Do not forget about browser caching • Imports block rendering(use async if needed)
- 27. Custom Elements
- 28. Simple creation
- 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
- 31. How it works?
- 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