Re: Controling style of elements in Injection Points

I've updated your pen with the other minor syntax changes that have occured
in Chrome Canary:

@host -> :host

template.content.cloneNode(true) -> document.importNode(template.content)

::content p {} will always win over ::content {}, so I moved the black
color to the style for p { }

http://codepen.io/anon/pen/tcjeh


On Tue, Dec 10, 2013 at 2:58 PM, Enrique Moreno Tent <
enriquemorenotent@gmail.com> wrote:

> Thank you all! Finally I understand how it works :)
>
> I made a small pen to illustrate this better
> http://codepen.io/dbugger/pen/Hyihd
>
>
> On 1 December 2013 23:35, Daniel Freedman <dfreedm@google.com> wrote:
>
>> ::content is behind the "Experimental Web Platform Features" chrome flag,
>> along with the unprefixed createShadowRoot.
>>
>>
>> On Fri, Nov 29, 2013 at 6:00 AM, Enrique Moreno Tent <
>> enriquemorenotent@gmail.com> wrote:
>>
>>> I have actually have gotten to work with ":-webkit-distributed(p)" but
>>> as I read it has been deprecated and ":content p" should work (but it
>>> doesnt).
>>>
>>> Do I need maybe to activate a flag? Im using Chrome 31 under Ubuntu, in
>>> case it matters.
>>>
>>>
>>> On 28 November 2013 18:39, Enrique Moreno Tent <
>>> enriquemorenotent@gmail.com> wrote:
>>>
>>>> Thank you :) But it is quite confusing to understand how it works. I
>>>> have tried to update my example, but still doesn't seem to work. Could you
>>>> tell me, in my example, what would be the selector? I tried "p::content",
>>>> but as you see that doesnt seem to work.
>>>>
>>>> My use case example, again, is here:
>>>> http://codepen.io/dbugger/pen/Hyihd
>>>>
>>>>
>>>> On 28 November 2013 09:58, Hayato Ito <hayato@google.com> wrote:
>>>>
>>>>> Yeah, Chrome has already implemented that. I've implemented that. :)
>>>>>
>>>>>
>>>>> On Thu, Nov 28, 2013 at 6:25 PM, Enrique Moreno Tent <
>>>>> enriquemorenotent@gmail.com> wrote:
>>>>>
>>>>>> Oh, interesting! Has this been implemented in any browser?
>>>>>>
>>>>>>
>>>>>> On 28 November 2013 08:46, Hayato Ito <hayato@google.com> wrote:
>>>>>>
>>>>>>> We can use '::content' pseudo elements if we want to apply styles to
>>>>>>> distributed nodes from a shadow tree.
>>>>>>>
>>>>>>> See
>>>>>>> http://w3c.github.io/webcomponents/spec/shadow/#content-pseudo-element
>>>>>>>
>>>>>>>
>>>>>>> On Thu, Nov 28, 2013 at 9:14 AM, Enrique Moreno Tent <
>>>>>>> enriquemorenotent@gmail.com> wrote:
>>>>>>>
>>>>>>>> Hello, I have been experimenting with Web Components and I have an
>>>>>>>> issue, which I think I have represented fairly clear here:
>>>>>>>>
>>>>>>>> (Tested on Chrome)
>>>>>>>> http://codepen.io/dbugger/pen/Hyihd
>>>>>>>>
>>>>>>>> If I understood correctly, one of the points of web components is
>>>>>>>> to control the presentation of our component. That is why we have the
>>>>>>>> Shadow Boundary. BUT what happens with the elements that are represented
>>>>>>>> with <content>? They are not considered part of the shadow, therefore the
>>>>>>>> styles that the author decides to apply on them, will "invade" the Web
>>>>>>>> Component.
>>>>>>>>
>>>>>>>> Any thought on this?
>>>>>>>>
>>>>>>>> --
>>>>>>>> Enrique Moreno Tent, Web developer
>>>>>>>> http://enriquemorenotent.com
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> Hayato
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Enrique Moreno Tent, Web developer
>>>>>> http://enriquemorenotent.com
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Hayato
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Enrique Moreno Tent, Web developer
>>>> http://enriquemorenotent.com
>>>>
>>>
>>>
>>>
>>> --
>>> Enrique Moreno Tent, Web developer
>>> http://enriquemorenotent.com
>>>
>>
>>
>
>
> --
> Enrique Moreno Tent, Web developer
> http://enriquemorenotent.com
>