[webcomponents] [Shadow]: Should insertion point nodes have styles? (bugzilla: 17591) (#250)

Title: [Shadow]: Should insertion point nodes have styles? (bugzilla: 17591)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=17591

----
comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=17591#c0
*Takashi Sakamoto* wrote on 2012-06-25 05:56:55 +0000.

According to the shadow dom spec: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles, insertion point nodes have styles:

- the styles of the insertion point node are inherited by those child nodes of the shadow host that are assigned to this insertion point
- the styles of the shadow insertion point node are inherited by the child nodes of the shadow root of the shadow DOM subtree, distributed to this shadow insertion point

I think, this behavior looks natural for web developers.

However, the spec also says:
"To enable composition of shadow host's children and the shadow DOM subtree, a notion of insertion points is added to the abstraction. An insertion point is a defined location in the shadow DOM subtree, to which the shadow host's children are transposed when rendering."
in http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-subtrees

So no insertion point nodes appear in a composed tree. If insertion point nodes have styles and the styles are inherited by distributed nodes, styles of nodes, which are not in a composed tree, will affect rendering result. I think, it looks a little odd.

The following is an example:

\<div\>
   \<span\>This is an example.\</span\>
\</div\>

And a shadow root is attached to the div and the shadow root's innerHTML is:

\<div\>!!!!
  \<content style="color: red">\</content\>
!!!!\</div\>

What color is the text: "This is an example."?

----

comment: 1
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=17591#c1
*Dimitri Glazkov* wrote on 2012-06-25 16:16:08 +0000.

(In reply to comment #0)
> According to the shadow dom spec:
> http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles,
> insertion point nodes have styles:
> 
> - the styles of the insertion point node are inherited by those child nodes of
> the shadow host that are assigned to this insertion point
> - the styles of the shadow insertion point node are inherited by the child
> nodes of the shadow root of the shadow DOM subtree, distributed to this shadow
> insertion point

I think there's a bug in spec here. What we need to convey is that the styles of the parent of the insertion point are inherited.

> I think, this behavior looks natural for web developers.
> 
> However, the spec also says:
> "To enable composition of shadow host's children and the shadow DOM subtree, a
> notion of insertion points is added to the abstraction. An insertion point is a
> defined location in the shadow DOM subtree, to which the shadow host's children
> are transposed when rendering."
> in
> http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-subtrees
> 
> So no insertion point nodes appear in a composed tree. If insertion point nodes
> have styles and the styles are inherited by distributed nodes, styles of nodes,
> which are not in a composed tree, will affect rendering result. I think, it
> looks a little odd.

Right.

> 
> The following is an example:
> 
> \<div\>
>    \<span\>This is an example.\</span\>
> \</div\>
> 
> And a shadow root is attached to the div and the shadow root's innerHTML is:
> 
> \<div\>!!!!
>   \<content style="color: red">\</content\>
> !!!!\</div\>
> 
> What color is the text: "This is an example."?

The color should be whatever the color of \<div\> in the shadow DOM subtree is. style="color:red" is not used.

However, we could consider that a \<content\> element does have styles, but has the initial style of display:contents and thus is not rendered. If the developer chooses to surface the \<content\> element, they could give it a different "display" value. This seems more flexible and less magical. However, we need to have "display:contents" spec'd in CSS first.

Bug 16294 is related to this.

----

comment: 2
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=17591#c2
*Takashi Sakamoto* wrote on 2012-06-26 10:54:10 +0000.

Thank  you for answering.

(In reply to comment #1)
> (In reply to comment #0)
> > According to the shadow dom spec:
> > http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles,
> > insertion point nodes have styles:
> > 
> > - the styles of the insertion point node are inherited by those child nodes of
> > the shadow host that are assigned to this insertion point
> > - the styles of the shadow insertion point node are inherited by the child
> > nodes of the shadow root of the shadow DOM subtree, distributed to this shadow
> > insertion point
> 
> I think there's a bug in spec here. What we need to convey is that the styles
> of the parent of the insertion point are inherited.

I see. 

> > I think, this behavior looks natural for web developers.
> > 
> > However, the spec also says:
> > "To enable composition of shadow host's children and the shadow DOM subtree, a
> > notion of insertion points is added to the abstraction. An insertion point is a
> > defined location in the shadow DOM subtree, to which the shadow host's children
> > are transposed when rendering."
> > in
> > http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-subtrees
> > 
> > So no insertion point nodes appear in a composed tree. If insertion point nodes
> > have styles and the styles are inherited by distributed nodes, styles of nodes,
> > which are not in a composed tree, will affect rendering result. I think, it
> > looks a little odd.
> 
> Right.
> 
> > 
> > The following is an example:
> > 
> > \<div\>
> >    \<span\>This is an example.\</span\>
> > \</div\>
> > 
> > And a shadow root is attached to the div and the shadow root's innerHTML is:
> > 
> > \<div\>!!!!
> >   \<content style="color: red">\</content\>
> > !!!!\</div\>
> > 
> > What color is the text: "This is an example."?
> 
> The color should be whatever the color of \<div\> in the shadow DOM subtree is.
> style="color:red" is not used.

I see. The color of \<div\>, the parent of the insertion point node, is applied.

> However, we could consider that a \<content\> element does have styles, but has
> the initial style of display:contents and thus is not rendered. If the
> developer chooses to surface the \<content\> element, they could give it a
> different "display" value. This seems more flexible and less magical. However,
> we need to have "display:contents" spec'd in CSS first.
> 
> Bug 16294 is related to this.

I will look at the bug.

Best regards,
Takashi Sakamoto

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/250