Slots Shadow Dom

/ Comments off

Styling a Shadow Dom element from outside has really no effect. You probably noticed, this has no effect.The reason behind is that Shadow Dom have their own little kingdom and cannot be styled. By default, if an element has shadow DOM, the shadow tree is rendered instead of the element's children. To allow children to render, you can add a slot element to your shadow tree. Think of the slot as a placeholder showing where child nodes will render. Consider the following shadow tree for.

The straw-man proposal for Imperative Shadow DOM distribution API. The contextis:https://github.com/whatwg/html/issues/3534

[Update] This proposal was postedhere.

Shadow

Mixing declarative API and imperative API would be troublesome and can be thecause of confusions for web developers. We can invent complex rules, however,no one wants to remember complex rules. Also, supporting both in the same shadowtree would make a browser engine complex, which I don't want.

Thus, we don't allow mixing declarative API and imperative API in the sameshadow tree. Web developers have to show their opt-in to use imperative APIfor each shadow tree.

A shadow root has an associated slotting. Web developers can set shadow root'sslotting to manual by specifying it in attachShadow:

The manual means 'we support only imperative APIs for the shadow tree'. Thedefault is 'we support only declarative API for the shadow tree'.

In addition to assigned nodes, which is already defined in DOM Standard, aslot has an associated manually-assigned-nodes (ordered list). Unless statedotherwise, it is empty.

A slot gets new API, called assign (tentative name).

Basically, slot.assign(sequence<Node> nodes) sets the slot'smanually-assigned-nodes to nodes. See the later section for details.

manually-assigned-nodes is an internal field. It is write-only. Users cannotread the value directly.

HTMLSlotElement

slot.assign(sequence<Node> nodes) runs the following steps:

  1. Set the slot's manually-assigned-nodes to nodes.
  2. Run assign slotables for a tree with slot’s tree.

step 2 is required because we have to re-calculate assigned nodes of everyslots in the tree at this timing.

Note: The detail is explained later, however, it would be worth noting thatmanually-assigned-nodes is not used as assigned nodes as is. You can thinkthat slot.assign(sequence<Node> nodes) tell the engine candidate nodes fromwhere assigned nodes are constructed.

ShadowRootInit

4.2.2.3. Finding slots and slotables

To find a slot need to be updated. Other steps don't need to be updated fromthe standard's perspective, I think, thanks to well-factored each steps.

To find a slot for a given slotable slotable and an optional open flag(unset unless stated otherwise), run these steps:

  1. If slotable’s parent is null, then return null.

  2. Let shadow be slotable’s parent’s shadow root.

  3. If shadow is null, then return null.

  4. If the open flag is set and shadow’s mode is not 'open', then return null.

  5. [New Step] If shadow's slotting is manual, return the first slot inshadow’s tree whose manually-assigned-nodes includes slotable, if any, andnull otherwise.

  6. Otherwise, return the first slot in shadow’s tree whose name is slotable’sname, if any, and null otherwise. (<= No change)

Note: This change implies:

  • manually-assigned-nodes is used only when a slot is in a shadow tree whoseslotting is manual.

  • manually-assigned-nodes is not used when a slot is in a shadow tree whoseslotting is auto.

    Web developers can call slot.assign(...) for such a slot, however, it is asort of no-op, at least until the slot is moved to another shadow tree with'manual', where manually-assigned-nodes might have a meaning (but it isunlikely).

  • If the same node is set to manually-assigned-nodes of more than one slots,the first slot in tree-order takes that node. The slot's location in the treematters, as declarative API does so.

Example 1: How imperative slotting API works in slotting=manual.

Example 1: Imperative slotting API doesn't have any effect in a shadow root with slotting=auto.

Slots Shadow Domain

  • Should we reset manually-assigned-nodes at some timings? e.g. when a slot isconnected / or disconnected.

    The current proposal never resets manually-assigned-nodes. This rule is easyto remember. That would cover the most use cases, I think.

  • Using sequence<Node> would be a right choice in slot.assign, given that theorder doesn't matter?

    If WebIDL has a better type, like Set<Node>, we should use it.