Re: Shadow tree style isolation primitive

On Thu, Feb 5, 2015 at 10:52 AM, Marc Fawzi <marc.fawzi@gmail.com> wrote:

> Following this thread because there is real need for what is being
> discussed.
>
> However, until that need is satisfied, here is what we're thinking to
> achieve style encapsulation, using current-world technologies, and I'm
> hoping you would point out any problems you see with doing it this way.
>
> 1. We build components that render DOM elements, e.g. via React or
> something like that.
> 2. We write or generate a stylesheet per component and name the .css file
> same as component name, and convert it from CSS to a named subtree (e.g.
> CSS.componentName.styles: { ... }) in a global JSON structure (build time)
> 3. The components consume style rules from that data structure at run time
> and convert them to inline styles on the elements they render. The inline
> styles are injected and rewritten based on component state. We use CSS3
> transitions rather than style tweening.
> 4. For @keyframes, we create a style element in the document and namespace
> them like component-name-keyframe-name.
>
> Not using this list as a Stackoverflow substitute. My purpose here is to
> show one way of achieving style isolation without Web Components, Shadow
> DOM, etc, and figure out whether the web needs anything more than we
> already have.
>

This sounds pretty neat and similar to thing that Christopher Chedeau
presented in his "CSS in your JS" talk (http://vimeo.com/116209150). I
can't think of a better example of the Web Platform (and CSS in particular)
completely failing the developer. I admire your and Christopher's
desperation and persistence to stay successful within the constraints of
the existing system.

FWIW, with Shadow DOM, you simply don't need any of these build steps or
factorings. Just write your styles in your component.

:DG<