[whatwg] A link[scoped] usecase

[Gray Zhang]

Hi all:

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:
[image: Inline image 1]

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.

-- 
张立理 GrayZhang
博客：http://www.otakustay.com
微博：http://www.weibo.com/otakustay
邮箱：otakustay at gmail.com