Active Element

Web Components ⟩ Shadow DOM ⟩ Events ⟩

📗 參考

• Google ⟩ Web Component ⟩ Handling focus

📘 手冊

👉 相關

• <my-log> ❤️

events that are fired inside shadow DOM are adjusted to look like they come from the hosting element.

<x-focus>
  #shadow-root
    <input type="text" placeholder="input inside shadow dom">

Active Element in Shadow DOM

// ⭐️ 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.

💾 replit

main.js

// 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);
}

x-focus

// 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()
});

html

<x-focus delegates-focus></x-focus>
<x-focus></x-focus>

<my-log></my-log>

css (outer)

:focus {
    outline: 2px solid red;
}

css (inner)

:host {
    display: flex;
    gap: 8px;
    border: 1px dotted black;
    padding: 16px;
}

:focus {
    outline: 2px solid blue;
}

codepen

👉 相關

• <my-log> ❤️