Hi all, After several discussions on the whatwg@ mailing list and others, we would like to go forward with adding <style scoped> to WebKit.
Overview: Style rules within <style scoped> only apply to the parent element of <style scoped> (the scoping element), as well as descendants of it. Any other nodes are unaffected. This allows authors to style specific parts of a page without requiring ID prefixes. It also has potential performance benefits, as scoped rules do not need to be evaluated outside their scope. As per discussion on http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032056.html, our implementation would diverge from the current HTML5 spec ( http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element) in that we would match selectors only up to, and including, the scoping element. E.g.,: <html> <body> <div id="bar" class="X"> <!-- A --> <div id="foo"> <!-- B --> <style scoped> div { ... } // applies to B, C, D .X { ... } // applies to C .Y { ... } // applies to D .X .Y { ... } // doesn't match #foo { ... } // applies to B #bar { ... } // doesn't match div div { ... } // applies to C, D div div div { ... } // doesn't match #foo div { ... } // applies to C, D div #foo div { ... } // doesn't match #bar .X { ... } // doesn't match .X div { ... } // doesn't match .X + div { ... } // apples to D .X + .Y { ... } // apples to D </style> <div class="X"> <!-- C --> </div> <div class="Y"> <!-- D --> </div> </div> </div> <div class="Y"> <!-- E --> </div> </body> </html> If authors want to have a selector be able to bridge this barrier (but still only apply to elements within the scope), we propose that the selector must explicitly contain :root or :scope. E.g., with above HTML example: :scope { ... } // applies to C div:scope { ... } // applies to C #foo:scope { ... } // applies to C #foo:scope div { ... } // applies to C, D #bar:scope div { ... } // doesn't match: match exceeds scope due to presence of :scope, but A (#bar) isn't the scoping element div :scope div { ... } // applies to C, D: match exceeds scope due to presence of :scope :scope div div { ... } // doesn't match: no 2 nested divs beneath the scoping element B :root div { ... } // applies to B, C, D: match exceeds scope due to presence of :root, but still doesn't apply to elements outside the scope :root div div div { ... } // applies to C, D: match exceeds scope due to presence of :root However, this functionality (esp. implementation of :scope) would not be part of the initial patch series. The implementation plan is as follows: 1.) Add 'scoped' to HTMLStyleElement.idl and HTMLAttributeNames.in, as well as adding the required plumbing for the attribute 2.) Implement registering with the scoping element. For efficient matching it is necessary that an element can quickly discern whether or not it has <style scoped> as direct child(ren). 3.) Implement the meat of the matching (see below) 4.) Add support for scoped @keyframes and @font-face Note: https://bugs.webkit.org/show_bug.cgi?id=49142 already has a patch for steps 1-3 that works as advertised. In order to make it easier to review, I would just break it up into smaller chunks as outlined above. ad 3.) Implementation of scoped selector matching works as follows: .) scoped style sheet rules are contained in a separate map <scoping element address> -> RuleSet .) add a field to ParentStackFrame that identifies the closest ParentStackFrame that refers to a scoping element .) during matching only check RuleSets that are thusly identified in ParentStackFrame (plus a slow path that climbs the tree in case ParentStackFrame isn't applicable), plus global rules .) add a 'scope' parameter to the matching functions that identifies the scoping element that limits the matching. Note that with this implementation rules in scoped RuleSets that are not "in scope" aren't even looked at. Also note that the actual selector data is NOT modified for this. I.e., a selector in a scoped style sheet is not different from a global selector. This has several benefits: .) no updating necessary if a <style> element is inserted or removed from the document, nor when the 'scoped' attribute is set/unset. .) paves the way for a trivial implementation of a similarly scoped querySelector[All]. .) for components: several component instantiations can re-use the same template style sheet without the need to clone its rules. Please let me know your thoughts, - Roland
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev

