Issue metadata
Sign in to add a comment
|
ShadowDOM <slot> ignores custom elements.
Reported by
d.vel...@gmail.com,
Jan 20 2017
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
Steps to reproduce the problem:
1. Make custom element:
<!-- ELEMENT -->
<div class='outer'>
<div class='inner'>
<!-- FIRST ELEMENT -->
<slot name='x-first'></slot>
<!-- ANY ELEMENT -->
<slot></slot>
<!-- LAST ELEMENT -->
<slot name='x-last'></slot>
</div>
</div>
2. Define custom component: customElements.define('x-element', xElement);
3. Use custom component <x-element>:
<x-element>
<!-- FIRST ELEMENT -->
<x-first slot='x-first'> custom element 1 </x-first>
<!-- ANY ELEMENT -->
see expected behaviour
<!-- LAST ELEMENT -->
<x-last slot='x-last'>custom element 3</x-last>
</x-element>
What is the expected behavior?
Possibility to put any element regardless of it's origin, i.e. <div> or <img> or custom element <x-something>
What went wrong?
<slot></slot> ignores custom element.
<x-element>
<!-- FIRST ELEMENT -->
<x-first slot='x-first'> custom element 1 </x-first>
<!-- ANY ELEMENT -->
<x-new slot='x-new'> </x-new>
<!-- LAST ELEMENT -->
<x-last slot='x-last'>custom element 3</x-last>
</x-element>
Custom element like <x-new slot='x-new'> does not appear.
Meanwhile, in Firefox result as expected.
For some reason in G-chrome ignores custom element.
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 54.0.2840.71 Channel: n/a
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 24.0 r0
To my understanding the <slot></slot> element that does not have attribute 'name' should in theory put ANY content submitted to it.
,
Jan 23 2017
,
Jan 24 2017
Could you pull that code together into an attachment so we can make sure we're looking at exactly the same thing?
,
Jan 24 2017
Hi, Here is a fork from another bug (683370), but it is updated according to this issues. Example: -> https://jsfiddle.net/wepbhohv/1/ So to my understanding when we put <slot></slot> without any name, then in this slot should go ANY content we put. In above example there I put: <div slot='x-anything'> here any content custom or not...</div> And it doesn't work... if we remove slot name, then it would work.
,
Jan 25 2017
,
Feb 3 2017
Looking at jsfiddle in comment #4, do you expect <div slot='x-anything'></div> would assigned to unnamed <slot></slot>? As the div has an explicit target slot, if any slot with that exact name doesn't exist, the div goes nowhere. If my understanding is right, this is working as expected.
,
Feb 9 2017
d.veliks@ could you please respond to the comment #6.
,
Feb 10 2017
,
Feb 22 2017
,
Feb 22 2017
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by d.vel...@gmail.com
, Jan 20 2017