slot(name) api

[sashafirsov]

slots(name)

returns assignedNodes as substitution for

const slotContent = this.$('slot')[0].assignedNodes()[0].textContent;

slots(name,value)

as alias to slots(name) .innerHTML=value

[sashafirsov]

Using templates and slots

Slot use cases

get slot elements to fill out manually

slot( name = undefined )

hide all and show one

• slot().hide( name=undefined ) hide slots, returns 1st set. Calls
  slot().forEach( el=>( !name || el.slot === name) && el.hidden=true ),
• slot().show( name=undefined ) show slots, same as ^^ except of hidden=false
  The usual sequence slot().hide().show(name) to hide all except of given slot

replace slot content

• slot( name, htmlOrNodeSet ) set slot content, return slots
• slot().html( htmlOrNodeSet ) alias to slot().innerHTML for string or slot().clear().set( Node )

clone slot for manipulation,

• slot().clone() returns cloned detached from DOM slots
  hidden property/attribute of cloned node is set to false to make it visible.

use a slot as a micro-template to be injected by slot(name).append(clone)

append content to slot

• slot().append( name ) - clone and add
• slot().append( name, node ) - appends node to slot with given name, returns 1st set.
• slot().append( node ) - appends node to slot , returns 1st set.

also populates added element slot property with name. Same slot could be appended multiple times to give the list effect.

clear previously added

slot().clear( name = undefined ) removes all slots injected by slot().append().

$().empty() does not work with slots.

[sashafirsov]

implemented