In shadow DOM v0 developers were not required to know as much about the internal implementation of how/where light DOM content was to be placed in a ponent's shadow dom.

The v0 specification matched the current behavior of built-in ponents like <select> and <option> where the consumer doesn't care as much where specifically their element content would be placed. Instead, the shadow DOM would automatically pick up the elements that match selectors specified in the select attribute on a <content> tag and place them in the correct location inside the shadow tree. This required less boilerplate on the consuming developer's code.

In v1 you need to know the slot name specifically. Mimicking the same example previously mentioned with <select>, I would need to use something like <option slot="option"> where the slot attribute value specifies where to put the current element. I would also be allowed to add elements that were not intended to be included in that slot like <table slot="option">.

In summary, my concerns are:

1. Needing to specify extra information every time I use the webponent
2. Having the ability to add invalid elements to the wrong shadow DOM location and have that cause unpredictable side-effects

In shadow DOM v1 is there a way to get the old behavior of <content select="option"></content> where a child has to match a specific selector or it is discarded? If not, does anyone know why specifically such a big breaking change was made?

Example 1 (v0 specification)

index.html

<my-ponent>
    <my-child-ponent>Text</my-child-ponent>
    <wrong-child-ponent>Wrong</wrong-child-ponent>
</my-ponent>

ponent.html (shadow DOM)

<div>
    <content select="my-child-ponent"></ponent>
</div>

resulting DOM

<my-ponent>
    #shadow-root
        <div>
            <my-child-ponent>Text</my-child-ponent>
        </div>
<my-ponent>

Example 2 (v1 specification)

index.html

<my-ponent>
    <my-child-ponent slot="child-slot">Text</my-child>
    <wrong-child-ponent slot="child-slot">Wrong</wrong-child-ponent>
</my-ponent>

ponent.html (shadow DOM)

<div>
    <slot name="child-slot"></slot>
</div>

resulting DOM

<my-ponent>
    #shadow-root
        <div>
            <my-child-ponent>Text</my-child-ponent>
            <wrong-child-ponent>Wrong</wrong-child-ponent>
        </div>
<my-ponent>

In shadow DOM v0 developers were not required to know as much about the internal implementation of how/where light DOM content was to be placed in a ponent's shadow dom.

The v0 specification matched the current behavior of built-in ponents like <select> and <option> where the consumer doesn't care as much where specifically their element content would be placed. Instead, the shadow DOM would automatically pick up the elements that match selectors specified in the select attribute on a <content> tag and place them in the correct location inside the shadow tree. This required less boilerplate on the consuming developer's code.

In v1 you need to know the slot name specifically. Mimicking the same example previously mentioned with <select>, I would need to use something like <option slot="option"> where the slot attribute value specifies where to put the current element. I would also be allowed to add elements that were not intended to be included in that slot like <table slot="option">.

In summary, my concerns are:

1. Needing to specify extra information every time I use the webponent
2. Having the ability to add invalid elements to the wrong shadow DOM location and have that cause unpredictable side-effects

In shadow DOM v1 is there a way to get the old behavior of <content select="option"></content> where a child has to match a specific selector or it is discarded? If not, does anyone know why specifically such a big breaking change was made?

Example 1 (v0 specification)

index.html

<my-ponent>
    <my-child-ponent>Text</my-child-ponent>
    <wrong-child-ponent>Wrong</wrong-child-ponent>
</my-ponent>

ponent.html (shadow DOM)

<div>
    <content select="my-child-ponent"></ponent>
</div>

resulting DOM

<my-ponent>
    #shadow-root
        <div>
            <my-child-ponent>Text</my-child-ponent>
        </div>
<my-ponent>

Example 2 (v1 specification)

index.html

<my-ponent>
    <my-child-ponent slot="child-slot">Text</my-child>
    <wrong-child-ponent slot="child-slot">Wrong</wrong-child-ponent>
</my-ponent>

ponent.html (shadow DOM)

<div>
    <slot name="child-slot"></slot>
</div>

resulting DOM

<my-ponent>
    #shadow-root
        <div>
            <my-child-ponent>Text</my-child-ponent>
            <wrong-child-ponent>Wrong</wrong-child-ponent>
        </div>
<my-ponent>

• javascript
• browser
• web-ponent
• shadow-dom

• 2 Still not following. Though, admittedly, have not tried version 1. Can you create stacksnippets or plnkr plnkr.co to demonstrate both approaches, and what you are trying to achieve at version 1 that you are currently implementing at version 0? – guest271314 Commented Dec 23, 2016 at 23:57
• 2 @Oriol, slot is an element which has an optional name attribute on it. <slot name="foo"></slot>. This slot element exists in the element's shadow dom. When someone wants an element in "light dom" to be distributed into the shadow dom, they would specify a slot attribute on that element with the name of the corresponding slot as the value: <p slot="foo">Bar</p>. This is the v1 version of what content was in v0. Also, here is a link to a page describing the v1/v0 differences. – KevBot Commented Dec 24, 2016 at 0:02
• 1 If result is the same, not certain what issue is? – guest271314 Commented Dec 24, 2016 at 1:04
• 1 1. Needing to specify extra information everytime you use the webponent. 2. Ability to add invalid elements to the wrong shadow DOM location. What is contained in the second to last paragraph. – Walt Commented Dec 24, 2016 at 1:09
• 1 Generally it is bad practice to implement code in a way you know to be deprecated. I'm not trying to sway the method of implementation in a Stackoverflow question. I just want to know if somehow in my reading I have missed a way of acplishing the same thing. – Walt Commented Dec 24, 2016 at 2:30

2 Answers 2

To filter the right elements, maybe you can use the ::slotted( selector ) pseudo-element in your Shadow DOM CSS styles:

<style>
    ::slotted( :not( option ) )
    {
        display: none;
    }
</style>
<slot></slot>

...will display only <option> elements.

For v1 there will be no other alternate to slot(as far as i have read). But i still don't see the problem. Just like content you can use nameless slot also.

Here's an example for Polymer's 2.0 migration guide

<!-- element template -->
<dom-module id="my-el">
  <template>
   ...
   <h2>
     <slot name="title"></slot>
   </h2>
   <div>
     <slot></slot>
   </div>
 </template>
</dom-module>

...
<!-- usage -->
<my-el>
   <span slot="title">Mr. Darcy</span>
   <span>Fun at parties.</span>
</my-el>

Here's one of the discussion on github discussing proposing using slot over content and just to list few advantages of slot over content

Default slot versus default insertion point. In v0, a default insertion point (one without a select attribute) consumes all nodes not matched by a previous insertion point. In v1, a default slot (one without a name attribute) only matches content with no slot attribute. In other words, a node with a slot attribute is never distributed to the default slot.

Though it has few disadvantages over content also but atleast for now vendors have agreed that slot is the way forward.