New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 683175 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner:
Last visit > 30 days ago
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-02-17
OS: Mac
Pri: 2
Type: Bug



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.
 

Comment 1 by d.vel...@gmail.com, Jan 20 2017

Obviously: 

<!-- ANY ELEMENT -->
<x-new slot='x-new'> has content </x-new> 

Comment 2 by ajha@chromium.org, Jan 23 2017

Labels: Needs-Milestone
Components: -Blink>DOM Blink>DOM>ShadowDOM
Labels: Needs-Feedback
Could you pull that code together into an attachment so we can make sure we're looking at exactly the same thing?

Comment 4 by d.vel...@gmail.com, 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. 
Screen Shot - slot-anything.png
563 KB View Download
Labels: -Needs-Feedback Needs-Triage-M57

Comment 6 by kochi@chromium.org, 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.
Cc: kkaluri@chromium.org
Labels: Needs-Feedback
 d.veliks@ could you please respond to the comment #6.

Comment 8 by kochi@chromium.org, Feb 10 2017

NextAction: 2017-02-17
Owner: hayato@chromium.org
Owner: dominicc@chromium.org
Status: WontFix (was: Unconfirmed)

Sign in to add a comment