[whatwg] A <link rel=stylesheet scoped> usecase

[Ian Hickson]

On Fri, 2 Mar 2012, Gray Zhang wrote:
> 
> I've noticed a scoped attribute for link element has been previously 
> discussed, I'm currently working with some new HTML features and find a 
> case where the scoped attribute is required on link element.
> 
> I'm working on an code editor and building up a scalable theme system, 
> as I designed, it should satisfy a list of requirements:
> 
> 1. user (3rd party) can publish their theme to my system
> 2. user can preview themes and choose one for their editor
> 3. there is no server side support such as providing a snapshot image for
> skin
> 4. a theme is simply a .css file without anything else
> 
> The preview-and-choose panel may look like this:
> http://lists.w3.org/Archives/Public/www-archive/2012Mar/att-0003/code-editor-theme-panel
> 
> Each preview pane is constructed with pure DOM, if <link scoped> is
> supported, I could have some elements and text in a wapper, then apply an
> external css on this wrapper so that color/background effect could be
> rendered:
> 
> <div>
>     <!-- This link element only works for it's containing div -->
>     <link rel="stylesheet"
> href="3rd-party-theme/user-published-20120302133702.css" scoped="scoped" />
>     <span class="keyword">function</span><span
> class="identifier">test</span>...
> </div>
> 
> By now, for the reason that there is not link[scoped] and style[scoped] is
> not supported for any browser, my solution is add a data-theme attribute on
> wrapper element, and the theme .css file should add some extra selector:
> 
> .visual-root[data-theme="fireworks"] {
>     background-color: #404040;
>     color: #addede;
> }
> 
> The addition of [data-theme="foo"] selector is a really bad smell for me,
> in such case I also provided theme author a script to auto generate a theme
> structure, but all these could be solved with the support of link[scoped]
> element.

This is the first time I've seen a good use case for this!

It still seems like a bit of an edge case, so I think it's ok for us to 
continue to rely on @import for this for now. But we should keep an eye 
out for how often people use this technique; if it is indeed something 
that comes up a lot, then introducing scoped="" on <link rel=stylesheet> 
would make sense.


On Fri, 2 Mar 2012, Tab Atkins Jr. wrote:
> 
> Do this instead:
> 
> <div>
>   <style scoped>
>     @import "3rd-party-theme/user-published-20120302133702.css";
>   </style>
>   <span class="keyword">function</span><span> class="identifier">test</span>...
> </div>

That's a good workaround, but if the use case is something we want to 
actually address, I think supporting <link> here makes sense too.


On Fri, 2 Mar 2012, Tab Atkins Jr. wrote:
> On Fri, Mar 2, 2012 at 10:03 AM, Kang-Hao (Kenny) Lu
> <kennyluck at csail.mit.edu> wrote:
> > 
> > I talked to Hixie on IRC[1] and he seems to think that there's no use
> > case for <style>@import</style> either.
> 
> Hixie has odd views sometimes.  ^_^ 

For the record, I meant specifically a <style scoped> @import. Obviously 
@import in general has plenty of uses -- the same ones as <link>, mostly.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'