Merge pull request #785 from MathieuPuech/fix/overlays-focusable-slotted

fix(overlays): make focusable slotted buttons

packages/dialog/README.md

@@ -9,6 +9,7 @@ Its purpose is to make it easy to use our Overlay System declaratively.
 import { html } from 'lit-html';
 import demoStyle from './docs/demo-dialog-style.js';
 import './docs/styled-dialog-content.js';
+import './docs/slots-dialog-content.js';
 import './lion-dialog.js';
 
 export default {
@@ -100,6 +101,20 @@ export const stylingContent = () => html`
 `;
 ```
 
+### Content with slots
+
+```js preview-story
+export const slotsContent = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
+    <button slot="invoker">Dialog with content with slots</button>
+    <slots-dialog-content slot="content"></slots-dialog-content>
+  </lion-dialog>
+`;
+```
+
 ### Close overlay from component slotted as content
 
 The overlay cannot be closed by dispatching the `close-overlay` from a button in a styled component that is slotted in as content, because it will not cross the shadow boundary of the component. A method should be created that will dispatch the `close-overlay` event from the component.

packages/dialog/docs/slots-dialog-content.js

@@ -0,0 +1,14 @@
+import { LitElement, html } from '@lion/core';
+
+class SlotsDialogContent extends LitElement {
+  render() {
+    return html`
+      <button>shadow button</button>
+      <slot name="actions">
+        <button>slot button</button>
+      </slot>
+    `;
+  }
+}
+
+customElements.define('slots-dialog-content', SlotsDialogContent);

packages/overlays/src/utils/get-focusable-elements.js

@@ -42,7 +42,7 @@ function getChildNodes(element) {
   if (element.localName === 'slot') {
     /** @type {HTMLSlotElement} */
     const slot = element;
-    return slot.assignedNodes();
+    return slot.assignedNodes({ flatten: true });
   }
 
   const { children } = element.shadowRoot || element;