Re: Shadow DOM Encapsulation

> On Feb 6, 2014, at 8:26 PM, Peter Linss <peter.linss@hp.com> wrote:
> 
> 
>> On Feb 6, 2014, at 7:02 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> 
>>> On Thu, Feb 6, 2014 at 6:54 PM, Peter Linss <peter.linss@hp.com> wrote:
>>> On Feb 6, 2014, at 5:23 PM, Tab Atkins Jr. <jackalmage@gmail.com>
>>> wrote:
>>>> Note also that this isn't quite as easy as it sounds.  When you expose
>>>> things, where are they relative to everything else?
>>> 
>>> They are in the same place as they are defined, the structure is preserved for everything exported.
>>> 
>>> For example, given the shadow DOM:
>>> <component>
>>> <part-one export>
>>>   <sub-part-one />
>>> </part-one>
>>> <part-two>
>>>   <sub-part-two export>
>>>     <sub-sub-part-two />
>>>   </sub-part-two>
>>> </part-two>
>>> </component>
>>> 
>>> You'd see it as though it were defined as:
>>> <part-one>
>>> <sub-part-one />
>>> </part-one>
>>> <sub-part-two>
>>> <sub-sub-part-two />
>>> </sub-part-two>
>> 
>> Oof, so then "part-one + sub-part-two" would actually match?  That's
>> seems super weird to me.
> 
> In that obviously contrived example, yes, (although, for consistency, it would actually be "::part-one + ::sub-part-two") because that's the structure that's being exported, the <part-two> element doesn't exist when seen from the outside.

I think the idea is interesting, not weird. But it is a lot of colons. While initially I was in favor the pseudo-element approach, why couldn't your 'export' opt-in-to-expose work with the hat? Thus, the exact same mark up, but selected like this:

component ^ part-one + sub-part-two

Or even:

component^ > part-one + sub-part-two

That seems pretty clear to me. The carrot (hat) pierces the component barrier, making the component similar to :host, and closest level down of something with an export attribute acts as a child of that. It is more readable.

> This is actually a feature. For example, what if the component was initially shipped without the <part-two> element? It can be added, but not exported, and not break existing stylesheets because it doesn't affect the structure exposed to the selectors.

Maybe it is just the contrived example, but this seems dangerous still. Suppose I authored the following rule for a component you created:

component ::sub-part-two { display:block; width:50%; }

It now appears under part one, and goes halfway across the whole component's content box. But then you come along later and update the component by adingd an inline-block 'part-two' around it, and as the component author you think it looks good, but it completely changes the width and placement that my styling was intended to set. Is that just the nature of the beast?

>>> [...] 
>> "component ::before" explicitly means the same thing as "component
>> *::before".  Similarly, "component ::piece" would mean the same thing
>> as "component *::piece", which is definitely not what you're
>> intending.  
> 
> It _is_ what I'm intending.
> 
>> This is part of the definition of pseudo-element syntax; I
>> don't think it's reasonable to change it.
> 
> Not proposing to change it. I'm only proposing to relax the restrictions on it's use. So:
> component ::part-one:hover ::sub-part-one[foo=bar]:nth-child(even) { ... }
> would be valid.

I would like to see that sort of loosening of pseudo-elements, regardless.

> (as would "p::first-line span { color: blue }", but that's a horse of another color...)

I think it's kind of crazy that that doesn't work already. How to explain that limitation to beginning CSSers.

>> Are you implying then that the ::piece thing is *actually* a child (or
>> descendant) of the element in the normal way we use the term, but is
>> only matchable via its special name?
> 
> Yes.
> 
>> That's pretty weird, I think.

I think it is pretty straightforward. ::before and ::after are very much like that anyway (CSS-created children of the element). The double colon is not only an indicator of it being a pseudo-element, it is also a special kind of child selector.

> Why? The "::piece" thing is just that, a "thing", it's not a normal DOM element so shouldn't be addressable via element selectors, but being a shadow-dom node it's "*kind of* an element", e.g. a "pseudo-element"... Seems pretty straight-forward to me.

I think it is easier to think that it is a DOM element, just one on the other side of the veil that can only be exposed and selected in a way that the component author agrees to. Thus, I could live without all the colons.

Received on Friday, 7 February 2014 06:35:19 UTC