Take this use case: a component wants to provide a place for extension. For example, a video player may put playback controls in Shadow DOM but wants to let scripts add buttons to the controls.

The component could do this:

<!-- play/pause button -->
<div id="extensionpoint"></div>

and implement the extensionPoint attribute as:

this.extensionPoint = new ShadowRoot(controls.querySelector('#extensionpoint'))

Scripts can access the extensionPoint and add buttons to it, etc.

However the component can’t preserve its own encapsulation, because the extensionPoint.host property will point into the component’s shadow.

One way around this is for the component to do this:

<!-- play/pause button -->
<content select=".extensions"></content>

And the caller writes:

<…>
  <div class="extensions">…</div>
  …

But it seems a shame that we lose the imperative API by having the "host" property. What is it good for?