Web Components technology is trending these days. It allows to build component-based applications using native support of modern browsers. But it didn't appear out of nowhere, it has own difficult history of successes and fails.
3. Agenda
Why do we need componentization?
Additional componentization techniques
Beginning
HTML Components
XBL
Web Components
Pros & Cons
4. Why do we need components?
Isolation for different parts of an application
Complexity reduction
Hides details of implementation
Reusability
5. Additional componentization techniques
● Isolation for styles
● Isolation for javascript
○ Module pattern
○ Workers
● Iframes
○ Security and risks
○ Iframe seamless [proposed]
6. Beginning. HTML Components by Microsoft
1998 - 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
8. 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
11. Differences between XBL and HTC
VS.
XML HTML
Gecko Runtime Environment (GRE) ActiveX/ Internet Explorer
Multiple bindings One component per file
12. Success of first attempts
2007 - W3C released Candidate Recommendation of XBL 2
2011 - HTML Components officially deprecated in IE 10
2012 - Work on XBL 2 was abandoned. The specification was not implemented by
any other browser
13. Next attempt by Google
2013 - first mentioning of Web Components, version 0
Supported 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
14. 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">
20. 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
21. 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
22. Cons of Web Components
Cross-browser support ?
Could cause styles duplication
23. 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
Web Components is trending technology these days and of course it’s also very useful. It consists of set of technologies which are supported partially or fully in modern browsers. This technology provides you native ability for componentization, and creating, for instance some functional bricks/widgets which will be completely reusable, so you could create collections of reusable widgets.
But the decision to create this technologie did not come out of nothing, long time ago , by the standards of the web of course , appeared a need to isolate different parts of the application, like isolating styles or javascript functionality .
Isolation helps reduce complexity of the application and also allows to hide details of the implementation so this logic become more reusable.
Real need for isolation appeared when become an era of single page application. So needed to isolate pieces of your application to reduce complexity of such an application.
_ Js: workers no UI access
_ Iframe: risk of xss; seamless can’t allow partial styles; iframes limits dev. With creating APIs;
It used a declarative model for attaching events and APIs to a host element (with isolation in mind) and parsed components into a “viewlink” (a “Shadow DOM”)
_ 1998 from IE5.5 till IE10;
_ JScript (ECMA 262) or VBScript, or other third party which work with ActiveX
-----------------------------------------
<PUBLIC:COMPONENT> <PUBLIC:PROPERTY NAME="testColor" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="onOver()" /> <SCRIPT LANGUAGE="JScript"> function onOver() { // … do stuff } </SCRIPT> </PUBLIC:COMPONENT>
---------------------------------------------
<body> <ul> <li testcolor=”red” style="behavior:url(test.htc)">Foo Foo Foo</li> </ul> </body>
A declarative binding language with two binding flavors (similar to Microsoft’s HTML Components), XBL supported the additional features of host content model distribution and content generation.
_ XBL (XML Binding Language) (2001) , XBL2 (2007), for XUL user-interface language _ March, 2007 _ Gecko layout engine is the only implementation
_ abandoned by the W3C in 2012
#test-component { -moz-binding: url("my-component-binding.xml#my-component"); . . . }
_ <children> accept children )
_ you can define multiple bindings per XML file
<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="my-component" applyauthorstyles="true"> <content> <html:span style="/* some CSS */"> <children/> </html:span> </content> <implementation> <constructor> ... </constructor> <method name=”doSomething”> <body> … </body> </method> <property name=”status” onset=”. . .” onget=”. . .” /> <implementation> </binding> </bindings>
_ Mentionings of Web Components - https://www.w3.org/wiki/Webapps/Meetings#Web_Components
_ v0 v1 - http://stackoverflow.com/questions/40323180/what-are-the-differences-between-custom-elements-v0-and-v1
_ can I use - http://caniuse.com/#search=web%20components
_ http://www.2ality.com/2015/08/web-component-status.html
_ let by Google, used XBL ideas of Mozilla but broken monolithic to blocks. v0-v1 _ custom elements - https://jsbin.com/cimepeh/edit?html,js,output
_ templates - https://jsbin.com/visuqo/edit?html,output , doesn’t load source in template (better than script because DOM, better then hidden element because don’t load early)
_ shadow dom - https://jsbin.com/yaxegon/edit?html,js,console,output ; element can be registered only once;
_ styling - https://jsbin.com/feliyej/edit?html,css,js,output
WC XSS ????
_ shadow dom - https://jsbin.com/yaxegon/edit?html,js,console,output ; element can be registered only once;
_ styling - https://jsbin.com/feliyej/edit?html,css,js,output
