brief history of web components
TRANSCRIPT
Yevgeniy Valeyev
Front-end developer at Sytac
valeyev.pro
@yv_dev
Brief history of Web Components
AgendaWhy do we need componentization?
Additional componentization techniques
Beginning
HTML Components
XBL
Web Components
Pros & Cons
Why do we need components?Isolation for different parts of an application
Complexity reduction
Hides details of implementation
Reusability
Additional componentization techniques●Isolation for styles
●Isolation for javascript○ Module pattern
○ Workers
●Iframes○ Security and risks
○ Iframe seamless [proposed]
Beginning. HTML Components by Microsoft1998 - Microsoft proposed HTML Components which were supported in
IE 5.5
You could write them in JScript (ECMA 262) or VBScript (Visual Basic Script)
Required Microsoft ActiveX Scripting interfaces
HTML Component (.htc)
XBL by Mozilla 2001 - Mozilla introduces XBL
2007 - Release of XBL 2
XBL was an addition to Mozilla’s XUL
And was supported by all products of Mozilla
XBL by Mozilla
XBL by Mozilla
Differences between XBL and HTC
VS.
XML HTML
Gecko Runtime Environment (GRE)
ActiveX/ Internet Explorer
Multiple bindings One component per file
Success of first attempts2007 - W3C released Candidate Recommendation
of XBL 22011 - HTML Components officially deprecated
in IE 102012 - Work on XBL 2 was abandoned. The specification was not
implemented by any other browser
Next attempt by Google2013 - first mentioning of Web Components, version
0Supported only in Chrome and Opera with enabled flag
Was based on ideas described in XBL
2016 - added official support of v1 in Chrome and Opera
2014 - added official support of v0 in Chrome and Opera
2015 - several meetings to discuss what goes to v1 and what to further versions
Web Components●Custom elements
○ `is` attribute // <button is=”my-custom-button”>Test</button>
●Shadow DOM○ CSS Scoping // :host, :host-context, ::slotted
●Templates
● HTML Imports // <link rel="import" href="/imports/test.html">
Examples of Web ComponentsLet’s see some code . . .
Custom elementsName has to contain a dash
Custom Elements reactions
Shadow DOM Styling &encapsulation
Benefits of Shadow DOM● Styles encapsulation
●It could be an alternative to iframe, but Shadow DOM is a part of your document
Benefits of Custom elements● Logic encapsulation within HTML element
●Semantic markup
Why Template is good● Content of a template is parsed but not executed until we inject it in
a DOM
●We work directly with DOM
Why HTML imports are good● Allows import of other HTML files / injecting Web Components
Cons of Web ComponentsCross-browser support ?
Could cause styles duplication
Links
XUL & XBL consequences for Mozilla
XBL component example
XBL on MDN
HTML Components example
HTC on W3C
HTC vs XBL, book p.206
Mentions of Web Components in the past
Browsers support for v1 and v0
Custom elements v1 and v0
Templates example
Custom elements example
Styling example
Shadow DOM disadvantage
