Re: Controling style of elements in Injection Points

Absolutely brilliant, Daniel! This is very explanatory :) I think I will
write a blog post about this.

Thank you very much for your answer!


On 11 December 2013 00:11, Daniel Freedman <dfreedm@google.com> wrote:

> And here's yet another version that should be usable in Stable Chrome and
> Canary: http://codepen.io/anon/pen/ybEch
>
>
> On Tue, Dec 10, 2013 at 4:08 PM, Daniel Freedman <dfreedm@google.com>wrote:
>
>> 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
>>>
>>
>>
>


-- 
Enrique Moreno Tent, Web developer
http://enriquemorenotent.com