brief history of web components
TRANSCRIPT
![Page 1: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/1.jpg)
Yevgeniy Valeyev
Front-end developer at Sytac
valeyev.pro
@yv_dev
![Page 2: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/2.jpg)
Brief history of Web Components
![Page 3: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/3.jpg)
AgendaWhy do we need componentization?
Additional componentization techniques
Beginning
HTML Components
XBL
Web Components
Pros & Cons
![Page 4: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/4.jpg)
Why do we need components?Isolation for different parts of an application
Complexity reduction
Hides details of implementation
Reusability
![Page 5: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/5.jpg)
Additional componentization techniques●Isolation for styles
●Isolation for javascript○ Module pattern
○ Workers
●Iframes○ Security and risks
○ Iframe seamless [proposed]
![Page 6: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/6.jpg)
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
![Page 7: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/7.jpg)
HTML Component (.htc)
![Page 8: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/8.jpg)
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
![Page 9: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/9.jpg)
XBL by Mozilla
![Page 10: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/10.jpg)
XBL by Mozilla
![Page 11: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/11.jpg)
Differences between XBL and HTC
VS.
XML HTML
Gecko Runtime Environment (GRE)
ActiveX/ Internet Explorer
Multiple bindings One component per file
![Page 12: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/12.jpg)
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
![Page 13: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/13.jpg)
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
![Page 14: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/14.jpg)
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">
![Page 15: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/15.jpg)
Examples of Web ComponentsLet’s see some code . . .
![Page 16: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/16.jpg)
Custom elementsName has to contain a dash
![Page 17: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/17.jpg)
Custom Elements reactions
![Page 18: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/18.jpg)
Shadow DOM Styling &encapsulation
![Page 20: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/20.jpg)
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
![Page 21: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/21.jpg)
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
![Page 22: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/22.jpg)
Cons of Web ComponentsCross-browser support ?
Could cause styles duplication
![Page 23: Brief history of web components](https://reader034.vdocument.in/reader034/viewer/2022042723/58b88b061a28ab3e3a8b4807/html5/thumbnails/23.jpg)
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