refactor: make it possible to customize overlay content root (#9744)

Author: web-padawan

packages/overlay/src/vaadin-overlay-focus-mixin.js

@@ -53,6 +53,15 @@ export const OverlayFocusMixin = (superClass) =>
       this.__focusRestorationController = new FocusRestorationController();
     }
 
+    /**
+     * Override to specify another element used as a content root,
+     * e.g. slotted into the overlay, rather than overlay itself.
+     * @protected
+     */
+    get _contentRoot() {
+      return this;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -127,15 +136,15 @@ export const OverlayFocusMixin = (superClass) =>
      * @protected
      */
     _deepContains(node) {
-      if (this.contains(node)) {
+      if (this._contentRoot.contains(node)) {
         return true;
       }
       let n = node;
       const doc = node.ownerDocument;
-      // Walk from node to `this` or `document`
-      while (n && n !== doc && n !== this) {
+      // Walk from node to content root or `document`
+      while (n && n !== doc && n !== this._contentRoot) {
         n = n.parentNode || n.host;
       }
-      return n === this;
+      return n === this._contentRoot;
     }
   };

packages/overlay/src/vaadin-overlay-mixin.js

@@ -163,7 +163,7 @@ export const OverlayMixin = (superClass) =>
      */
     requestContentUpdate() {
       if (this.renderer) {
-        this.renderer.call(this.owner, this, this.owner, this.model);
+        this.renderer.call(this.owner, this._contentRoot, this.owner, this.model);
       }
     }
 
@@ -256,11 +256,11 @@ export const OverlayMixin = (superClass) =>
       this._oldOpened = opened;
 
       if (rendererChanged && hasOldRenderer) {
-        this.innerHTML = '';
+        this._contentRoot.innerHTML = '';
         // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
         // When clearing the rendered content, this part needs to be manually disposed of.
         // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-        delete this._$litPart$;
+        delete this._contentRoot._$litPart$;
       }
 
       if (opened && renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {