[whatwg] A link[scoped] usecase

[Gray Zhang]

Attached image:

http://lists.w3.org/Archives/Public/www-archive/2012Mar/att-0003/code-editor-theme-panel

On Fri, Mar 2, 2012 at 6:59 PM, Gray Zhang <otakustay at gmail.com> wrote:

> 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
>
>


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