- Web developer Nolan Lawson writes about the difficulties of managing focus on a web page which makes use of the shadow DOM; parts of the page that are encapsulated and unable to be interacted with programmatically in the same way as regular DOM elements.
- If you’re implementing a modal dialog, you need to manage focus and prevent the user from tabbing outside of the modal window whilst it’s active. This is easier said than done; a common implementation is to use
querySelectorAllto find all interactive elements in the page, finding the first and last focusable elements within the modal, and then using a listener to hook into the tab key and overriding where it triggers the focus. But
document.querySelectorAllwon’t return any shadow DOM elements, so the browser could still allow you to tab into a shadow DOM area outside of the modal.
- Nolan proposes a new API;
element.getPreviousTabbableElement(), delegating this heavy lifting to the browser. For now, we’re left manually traversing through the DOM and inspecting each element recursively to see if it has a shadow DOM child, to create our list of all interactive elements in the page.
- My old team at the BBC also wrote about how they migrated away from iframes to the shadow DOM.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.