Skip to content

Commit 0df46c3

Browse files
sashafirsovsashafirsov
committed
slot() renamed to slots()
1 parent 5d999c1 commit 0df46c3

File tree

8 files changed

+112
-113
lines changed

8 files changed

+112
-113
lines changed

‎src/CssChainElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ CssChainElement extends HTMLElement
2727
$( ...arr ){ return $( this.shadowRoot ).$(...arr); }
2828

2929
__increment()
30-
{ const slotContent = this.$().slot().txt();
30+
{ const slotContent = this.$().slots().txt();
3131
this.$('b').innerHTML += `<span>${ slotContent }</span>`;
3232
this.counter = this.$('input').value = this.$('span').length;
3333
}

‎src/PokeApi-Explorer.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const getPokeList = async () =>
127127
, onSelected = async (p) => $$('pokemon-info-element').attr( 'src', p.url )
128128
, getPokemonId = p=> ( arr=>(arr.pop(), arr.pop()) )( p.url.split('/') )
129129
, getImgByPokemon = p =>`https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world/${getPokemonId(p)}.svg`
130-
, $template = $.slot('slot-select')
130+
, $template = $.slots('slot-select')
131131
, $listContainer = $template.parent().$('dl')
132132
, renderList = async()=>
133133
{
@@ -144,16 +144,16 @@ const getPokeList = async () =>
144144
.prop('checked', !i, 'input')
145145
.prop('src', getImgByPokemon( p ), 'img')
146146
.on('click', ()=>onSelected(p) )
147-
.slot( 'index', offset + i )
148-
.slot( 'name', p.name ) ) );
147+
.slots( 'index', offset + i )
148+
.slots( 'name', p.name ) ) );
149149
else // same without call chain, just as show case of HTMLElement API in CssChain
150150
page.results.forEach( (p,i)=>
151151
{
152152
const $c = $template.clone();
153153
$c.hidden = false;
154154
$c.$('input').checked = !i;
155-
$c.slot( 'index' ).innerText = offset + i;
156-
$c.slot( 'name' ).innerText = p.name;
155+
$c.slots( 'index' ).innerText = offset + i;
156+
$c.slots( 'name' ).innerText = p.name;
157157
$c.on('click', ()=>onSelected(p) )
158158
$c.$('img').src = getImgByPokemon( p );
159159
$listContainer.append($c);
@@ -167,6 +167,6 @@ const getPokeList = async () =>
167167
};
168168
$template.remove();
169169
const firstPage = await renderList()
170-
$.slot('counter').txt( firstPage.count );
170+
$.slots('counter').txt( firstPage.count );
171171
prevBtn.onclick = ()=> renderList( offset-=limit );
172172
nextBtn.onclick = ()=> renderList( offset+=limit );

‎src/slots-light-vs-shadow.html‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -383,8 +383,8 @@ <h3 slot="description"><a
383383
}, 'Slots: Slots not in a shadow tree, elements only.');
384384
it('createTestTree$: Slots not in a shadow tree', ()=>
385385
{
386-
const slotLight = $(test_slot_not_in_shadow).parent().$('.light' ).slot();
387-
const slotShadow = $(test_slot_not_in_shadow).parent().$('.shadow').slot();
386+
const slotLight = $(test_slot_not_in_shadow).parent().$('.light' ).slots();
387+
const slotShadow = $(test_slot_not_in_shadow).parent().$('.shadow').slots();
388388
expect(slotLight .assignedNodes ().length).to.equal(0);
389389
expect(slotShadow.assignedNodes ().length).to.equal(0);
390390
expect(slotLight .assignedElements().length).to.equal(0);
@@ -445,19 +445,19 @@ <h3 slot="description"><a
445445
{
446446
const shadow = $(test_slot_name_matching).parent().$('.shadow');
447447
const light = $(test_slot_name_matching).parent().$('.light' );
448-
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slot('slot1')[0]);
448+
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slots('slot1')[0]);
449449

450450
// assignedSlot in light DOM is not working, testing content instead
451-
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slot('slot1')[0]);
452-
expect( light.$('#host').slot('slot1').txt() ).to.equal( '#c1' );
451+
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slots('slot1')[0]);
452+
expect( light.$('#host').slots('slot1').txt() ).to.equal( '#c1' );
453453
expect( light.$('#s1').txt() ).to.equal( '#c1' );
454454

455-
expect(shadow.$('#c2').assignedSlot).to.equal(shadow.$('#host').slot('slot2')[0]);
456-
expect( light.$('#host').slot('slot2').txt() ).to.equal( '#c2' );
455+
expect(shadow.$('#c2').assignedSlot).to.equal(shadow.$('#host').slots('slot2')[0]);
456+
expect( light.$('#host').slots('slot2').txt() ).to.equal( '#c2' );
457457
expect( light.$('#s2').txt() ).to.equal( '#c2' );
458458

459459
expect(shadow.$('#c3').assignedSlot).to.equal(null);
460-
expect( light.$('#host').slot('xxx').txt() ).to.equal( '' );
460+
expect( light.$('#host').slots('xxx').txt() ).to.equal( '' );
461461
expect( light.$('#s3').txt() ).to.equal( '' );
462462
});
463463
test(() => {
@@ -474,12 +474,12 @@ <h3 slot="description"><a
474474
{
475475
const shadow = $(test_no_direct_host_child).parent().$('.shadow');
476476
const light = $(test_no_direct_host_child).parent().$('.light' );
477-
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slot('slot1')[0]);
477+
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slots('slot1')[0]);
478478

479479
// assignedSlot in light DOM is not working, testing content instead
480-
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slot('slot1')[0]);
481-
expect( shadow.$('#host').slot('slot1').txt() ).to.equal( '#c1#c2#s2' );
482-
expect( light.$('#host').slot('slot1').txt() ).to.equal( '#c1#c2#s2' );
480+
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slots('slot1')[0]);
481+
expect( shadow.$('#host').slots('slot1').txt() ).to.equal( '#c1#c2#s2' );
482+
expect( light.$('#host').slots('slot1').txt() ).to.equal( '#c1#c2#s2' );
483483
});
484484
test(() => {
485485
let n = createTestTree(test_default_slot);
@@ -493,14 +493,14 @@ <h3 slot="description"><a
493493
{
494494
const shadow = $(test_default_slot).parent().$('.shadow');
495495
const light = $(test_default_slot).parent().$('.light' );
496-
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slot('')[0]);
497-
expect(shadow.$('#c2').assignedSlot).to.equal(shadow.$('#host').slot('')[0]);
496+
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slots('')[0]);
497+
expect(shadow.$('#c2').assignedSlot).to.equal(shadow.$('#host').slots('')[0]);
498498
expect(shadow.$('#c3').assignedSlot).to.equal(null);
499499

500500
// assignedSlot in light DOM is not working, testing content instead
501-
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slot('slot1')[0]);
502-
expect( shadow.$('#host').slot().txt().replace( /\s+/g , '') ).to.equal( '#s1#c1#c2#s3' );
503-
expect( light.$('#host').slot().txt().replace( /\s+/g , '') ).to.equal( '#s1#c1#c2#s3' );
501+
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slots('slot1')[0]);
502+
expect( shadow.$('#host').slots().txt().replace( /\s+/g , '') ).to.equal( '#s1#c1#c2#s3' );
503+
expect( light.$('#host').slots().txt().replace( /\s+/g , '') ).to.equal( '#s1#c1#c2#s3' );
504504
});
505505
test(() => {
506506
let n = createTestTree(test_slot_in_slot);
@@ -513,11 +513,11 @@ <h3 slot="description"><a
513513
{
514514
const shadow = $(test_slot_in_slot).parent().$('.shadow');
515515
const light = $(test_slot_in_slot).parent().$('.light' );
516-
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slot('slot2')[0]);
517-
expect(shadow.$('#c2').assignedSlot).to.equal(shadow.$('#host').slot('slot1')[0]);
516+
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host').slots('slot2')[0]);
517+
expect(shadow.$('#c2').assignedSlot).to.equal(shadow.$('#host').slots('slot1')[0]);
518518

519519
// assignedSlot in light DOM is not working, testing content instead
520-
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slot('slot1')[0]);
520+
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slots('slot1')[0]);
521521
expect( shadow.$('#host').txt() ).to.equal( '#c2' );
522522
expect( light.$('#host').txt() ).to.equal( '#c2' );
523523
});
@@ -538,11 +538,11 @@ <h3 slot="description"><a
538538
{
539539
const shadow = $(test_slot_is_assigned_to_slot).parent().$('.shadow');
540540
const light = $(test_slot_is_assigned_to_slot).parent().$('.light' );
541-
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host1').slot('slot1')[0]);
542-
expect(shadow.$('#s1').assignedSlot).to.equal(shadow.$('#host1').slot('slot2')[0]);
541+
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host1').slots('slot1')[0]);
542+
expect(shadow.$('#s1').assignedSlot).to.equal(shadow.$('#host1').slots('slot2')[0]);
543543

544544
// assignedSlot in light DOM is not working, testing content instead
545-
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slot('slot1')[0]);
545+
// expect(light .$('#c1').assignedSlot).to.equal(light .$('#host').slots('slot1')[0]);
546546
expect( shadow.$('#host1').txt() ).to.equal( '#c1' );
547547
expect( light.$('#host1').txt() ).to.equal( '#c1' );
548548
});
@@ -564,15 +564,15 @@ <h3 slot="description"><a
564564
{
565565
const shadow = $(test_open_closed).parent().$('.shadow');
566566
const light = $(test_open_closed).parent().$('.light' );
567-
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host1').slot('slot1')[0]);
568-
expect(shadow.$('#host1').slot('slot1').assignedSlot).to.equal(null);
567+
expect(shadow.$('#c1').assignedSlot).to.equal(shadow.$('#host1').slots('slot1')[0]);
568+
expect(shadow.$('#host1').slots('slot1').assignedSlot).to.equal(null);
569569
expect(shadow.$('#s1').length).to.equal(0);// slot tag is replaced and not available anymore
570570

571571

572-
expect(shadow.$('#host1').slot('slot1').assignedNodes()).to.eql(shadow.$('#c1'));
572+
expect(shadow.$('#host1').slots('slot1').assignedNodes()).to.eql(shadow.$('#c1'));
573573
// host2 shadowRoot is closed and children including slots not available.
574-
// expect(shadow.$('#host1').$('#host2').slot('slot2').assignedNodes()).to.eql(shadow.$('#host1').slot('slot1'));
575-
expect(shadow.$('#host1').slot('slot1').assignedNodes({ flatten: true })).to.eql(shadow.$('#c1'));
574+
// expect(shadow.$('#host1').$('#host2').slots('slot2').assignedNodes()).to.eql(shadow.$('#host1').slots('slot1'));
575+
expect(shadow.$('#host1').slots('slot1').assignedNodes({ flatten: true })).to.eql(shadow.$('#c1'));
576576

577577
expect( shadow.$('#host1').txt() ).to.equal( '#c1' );
578578
expect( light.$('#host1').txt() ).to.equal( '#c1' );
@@ -673,12 +673,12 @@ <h3 slot="description"><a
673673
assert_equals( n[k].assignedSlot, s && n[s] ); // same in prev test
674674
expect(shadow.$('#'+k).assignedSlot || shadow.$('#host1').$('#'+k).assignedSlot || null)
675675
.to.equal( s
676-
&& ( shadow.$('#host1').slot().find( e=>e.id===s)
677-
|| shadow.$('#host1').$('#host2').slot().find( e=>e.id===s)
676+
&& ( shadow.$('#host1').slots().find( e=>e.id===s)
677+
|| shadow.$('#host1').$('#host2').slots().find( e=>e.id===s)
678678
|| null
679679
)
680680
);
681-
expect(light.$('#'+k).parentElement || null).to.equal(s && light.$('#host1').slot().find( e=>e.id===s));
681+
expect(light.$('#'+k).parentElement || null).to.equal(s && light.$('#host1').slots().find( e=>e.id===s));
682682
// node.assignedSlot in light DOM equals the parent slot
683683
};
684684
const assert_assignedNodes = (k,arr)=>
@@ -770,11 +770,11 @@ <h3 slot="description"><a
770770
const light = $(test_complex).parent().$('.light' );
771771

772772
shadow.$('#host1').append('<div slot="slot1" id="d1">#d1</div>');
773-
expect(shadow.$('#host1').slot('slot1').assignedNodes().map( e=>e.id )).to.eql( ['c1', 'd1']);
774-
expect(shadow.$('#d1').assignedSlot).to.eql( shadow.$('#host1').slot('slot1')[0]);
773+
expect(shadow.$('#host1').slots('slot1').assignedNodes().map( e=>e.id )).to.eql( ['c1', 'd1']);
774+
expect(shadow.$('#d1').assignedSlot).to.eql( shadow.$('#host1').slots('slot1')[0]);
775775

776776
assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, d1, n.c5]);
777-
expect( shadow.$('#host1').$('#host2').slot('slot5').assignedNodes({ flatten: true }).map( e=>e.id )).to.eql(['c1','d1','c5']);
777+
expect( shadow.$('#host1').$('#host2').slots('slot5').assignedNodes({ flatten: true }).map( e=>e.id )).to.eql(['c1','d1','c5']);
778778

779779
// there is no mutation to test in light dom as content is replaced by template
780780
// and no ability to get original children for applying template again
@@ -803,7 +803,7 @@ <h3 slot="description"><a
803803

804804
shadow.$('#c1').attr('slot','slot-none');
805805
assert_array_equals(n.s1.assignedNodes(), []);
806-
expect(shadow.$('#host1').slot('slot1').assignedNodes() ).to.eql([]);
806+
expect(shadow.$('#host1').slots('slot1').assignedNodes() ).to.eql([]);
807807
assert_equals(n.c1.assignedSlot, null);
808808
expect(shadow.$('#c1').assignedSlot ).to.eql(null);
809809

@@ -838,13 +838,13 @@ <h3 slot="description"><a
838838
shadow.$('#c1').attr('slot','slot2');
839839

840840
assert_array_equals(n.s1.assignedNodes(), []);
841-
expect(shadow.$('#host1').slot('slot1').assignedNodes() ).to.eql([]);
841+
expect(shadow.$('#host1').slots('slot1').assignedNodes() ).to.eql([]);
842842
assert_array_equals(n.s2.assignedNodes(), [n.c1, n.c2]);
843-
expect(shadow.$('#host1').slot('slot2').assignedNodes() ).to.eql([n.c1, n.c2]);
844-
assert_equals(shadow.$('#c1').assignedSlot, shadow.$('#host1').slot('slot2')[0]);
843+
expect(shadow.$('#host1').slots('slot2').assignedNodes() ).to.eql([n.c1, n.c2]);
844+
assert_equals(shadow.$('#c1').assignedSlot, shadow.$('#host1').slots('slot2')[0]);
845845

846-
assert_array_equals(shadow.$('#host1').$('#host2').slot('slot5').assignedNodes({ flatten: true }).filter( e=> e.nodeType !== 3 ), [n.c5]);
847-
assert_array_equals(shadow.$('#host1').$('#host2').slot('slot6').assignedNodes({ flatten: true }), [n.c1, n.c2, n.c6]);
846+
assert_array_equals(shadow.$('#host1').$('#host2').slots('slot5').assignedNodes({ flatten: true }).filter( e=> e.nodeType !== 3 ), [n.c5]);
847+
assert_array_equals(shadow.$('#host1').$('#host2').slots('slot6').assignedNodes({ flatten: true }), [n.c1, n.c2, n.c6]);
848848

849849
// no mutation test on light dom
850850
});

‎src/slots.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,11 @@ <h1>Visual presentation of Slot in shadow DOM from unit test </h1>
7474
<div slot="">default slot replacement</div>
7575
<div slot="outer">outer replacement</div>
7676
</slots-in-shadow>
77-
<button onclick="slots2innerText.$().slot().innerText='A'">
78-
$().slot().innerText='A' 💪</button>
77+
<button onclick="slots2innerText.$().slots().innerText='A'">
78+
$().slots().innerText='A' 💪</button>
7979
<button onclick="
80-
slots2innerText.$().slot().txt( (s,i)=>`B${i}`)">
81-
$().slot().txt( (s,i)=›`B${i}`) 🎨</button>
80+
slots2innerText.$().slots().txt( (s,i)=>`B${i}`)">
81+
$().slots().txt( (s,i)=›`B${i}`) 🎨</button>
8282
<button onclick="
8383
[...slots2innerText.querySelectorAll('[slot]') ]
8484
.map((s,i)=> s.innerText = `C${i}`) ">
@@ -92,11 +92,11 @@ <h1>Visual presentation of Slot in shadow DOM from unit test </h1>
9292
<div slot="">default slot replacement</div>
9393
<div slot="outer">outer replacement</div>
9494
</slots-in-shadow>
95-
<button onclick="slots2innerHTML.$().slot().innerHTML='<i>A</i>'">
96-
$().slot().innerHTML='<i>A</i>' 💪</button>
95+
<button onclick="slots2innerHTML.$().slots().innerHTML='<i>A</i>'">
96+
$().slots().innerHTML='<i>A</i>' 💪</button>
9797
<button onclick="
98-
slots2innerHTML.$().slot().html( (s,i)=>`<b>B${i}</b>`)">
99-
$().slot().html( (s,i)=›`<b>B${i}</b>`) 🎨</button>
98+
slots2innerHTML.$().slots().html( (s,i)=>`<b>B${i}</b>`)">
99+
$().slots().html( (s,i)=›`<b>B${i}</b>`) 🎨</button>
100100
<button onclick="
101101
[...slots2innerHTML.querySelectorAll('[slot]') ]
102102
.map((s,i)=> s.innerHTML = `<u>C${i}</u>`) ">
@@ -117,7 +117,7 @@ <h1>Visual presentation of Slot in shadow DOM from unit test </h1>
117117
function cloneOuter()
118118
{
119119
debugger;
120-
let $o = slots2clone.$().slot( 'outer' )
120+
let $o = slots2clone.$().slots( 'outer' )
121121
, c = $o.clone();
122122
c.$( 'b' ).innerText = ++cloneCount;
123123
$o.parent().append(c);

0 commit comments

Comments
 (0)