// ⭐️ if you click <input> inside a shadow root,
// the `focus` event will look like it came from <x-focus>,
// not the <input>❗️
document.activeElement // ⭐️ <x-focus>
// ⭐️ only works with {mode: open}.
document.activeElement.shadowRoot.activeElement // ⭐️ <input>
Active Element down Multiple Levels of Shadow DOM
If there are multiple levels of shadow DOM at play (say a custom element within another custom element), you need to recursively drill into the shadow roots to find the activeElement:
function deepActiveElement() {
// top-level active element
let a = document.activeElement;
// recursively drill into shadow roots to find activeElement
while (a && a.shadowRoot && a.shadowRoot.activeElement) {
a = a.shadowRoot.activeElement;
}
// return the real active element
return a;
}
{delegatesFocus: true}
If you click a node inside shadow DOM and the node is not a focusable area, the first focusable area becomes focused.
When a node inside shadow DOM gains focus, :focus applies to the host in addition to the focused element.
// outer DOM events (⭐️ 收不到 `focus` 訊號❓)
document.body.addEventListener('focus', e => {
let tag = document.activeElement.nodeName;
console.log(`Active element (outer DOM): ${tag}`);
})
// main
function log(msg){
const div = document.querySelector('my-log');
div.log(msg);
}
// register <x-focus>
customElements.define('x-focus', class extends HTMLElement {
constructor() {
// always call super() first in the constructor.
super();
/*
⭐️ {delegatesFocus: true} option
--------------------------------
• If you click a node inside shadow DOM and the node is not a
focusable area, the first focusable area becomes focused.
• When a node inside shadow DOM gains focus, :focus applies to
the host in addition to the focused element.
*/
const delegatesFocus = this.hasAttribute('delegates-focus');
const root = this.attachShadow({
mode: 'open',
delegatesFocus: delegatesFocus // ⭐️ delegates focus
});
root.innerHTML = `
<link rel="stylesheet" href="x-focus-styles.css" />
<div>${delegatesFocus ? '' : 'Not '}Clickable text</div>
<input type="text" placeholder="input inside shadow dom">
`;
// ⭐️ `focus` event inside shadow DOM:
this.addEventListener('focus', function(e) {
let tag = root.activeElement.nodeName;
console.log(`Active element (inside shadow dom): ${tag}`);
});
}// end: constructor()
});