another version of `Element.prototype.contains` that considers slotted elements as children

[canalun]

Hi, hope you all are well :)

motivation

Currently, Element.prototype.contains() doesn't see slotted elements as children.

#shadow-root
  <div>
    <slot></slot>
  </div>
<span>this is slotted</span>

div.contains(span)
=> false

ref: the latest version of DOM Living Standard: https://dom.spec.whatwg.org/#dom-node-contains

This behavior is sometimes problematic when <template> is used, and this kind of situation can possibly increase by the appearance of declarative shadow dom.

Of course, the alternative can be implemented on the side of each developer. But it's not so simple to implement it, especially taking the calculation cost into account. So it'll be helpful if another version of the function that considers slotted elements as children is provided by default.

draft of implementation for discussion

Basically, it's enough to apply Element.prototype.contains() recursively while drilling up to parentNode or assignedSlot. This implementation can detect shadow-including descendant also.

Element.prototype.containsIncludingSlot(element)
1. if element is null, return false
2. if this and element have the same root node, return this.contains(element).
3. let parentNode is as follows:
  - if element.assignedSlot is not null, element.assignedSlot
  - else if element.parentElement is not null, element.parentElement
  - else if element.parentNode is not null, element.parentNode.host (i.e. the function doesn't go across frames)
  - else, null
4. return this.containsIncludingSlot(element.assignedSlot).

I think it's a bit too complicated to let each developer to implement by themselves. Would like to hear opinions here :)

[WebReflection]

I wonder if contains(span, {slotted: true}) would be a better solution, but I agree there is some need for this, even though the tree might mislead eyes.

[canalun]

@WebReflection Thank you for giving your thoughts!! I agree with your idea about the interface. :)