Search code examples
domweb-componentshadow-dom

Why was support for multiple shadow roots removed and replaced with slots


During the Web Applications WG (WebApps) Web Components meeting in Mountain View CA US on Friday 24 April 2015, it was concluded that support multiple shadow roots should be removed. As I understand it, slots are supposed to be used as an alternative to using multiple shadow roots. However, the link provided in the meeting notes explaining the reasoning why using slots is better has been removed and I could not find any other documentation on how and why this decision was made. I suspect that it has to do with the confusing nature of handling multiple shadow roots, but I'm not sure. I would appreciate any explanation of the reasons why support for multiple shadow roots removed.

TLDR; What reasons were given for removing support for multiple shadow roots and requiring the use of slots instead.


Solution

  • It's because it was complex to implement.

    From the W3C Web Components wiki:

    Pros: enables consistent story for adding shadow trees to builtins / provides reasoning about subclassing DOM trees

    Cons: complexity / performance: may result in "submerged" trees that aren't rendered but still participate in style/layout

    Cost/benefit of change: Disables the use case for general inheritance-based component composition and Firefox UI in XBL) / Makes implementing Shadow DOM easier