You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've created a simple web component that lets you create a custom button.
When clicked, I want the page title to be focused.
With button tag and a simple text content inside, the title is not visually focused. Same with my web component (in slot). That's cool.
With button tag and a tag span inside, the title is not visually focused. But, the title is visually focused with my web component (in slot). That's not cool.
I don't understand why the title is visually focused (which I don't want it to be), when I click on the lightDom element (e.g. the span). This doesn't happen when I click on my component directly (the shadowDOM part).
I expect my title to be focus but not visible-focus, without hiding by forcing.
// Template web componentconsttemplate=document.createElement('template');template.innerHTML=` <style> button { background-color: lightgreen; padding: 10px; } </style> <button> <slot></slot> </button>`;// Class web componentclassMyBtnextendsHTMLElement{constructor(){super();this.attachShadow({mode: 'open'});this.shadowRoot.appendChild(template.content.cloneNode(true));}}// web component definitionwindow.customElements.define('my-btn',MyBtn);// Set focus to title on clickfunctionfocusTitle(){consth1=document.getElementById('title');h1.setAttribute('tabindex',-1);h1.focus();}// Add click event listenerdocument.getElementById('btn1').addEventListener('click',focusTitle);document.getElementById('btn2').addEventListener('click',focusTitle);
<h1id="title">Test redirection focus</h1><buttonid="btn1" style="padding: 10px"><span>(button > span) Click me and I don't visually focus title</span>
(button > simple text content) Click me and I don't visually focus title
</button><my-btnid="btn2"><span>(MyBtn > span) Click me and I DO visually focus title</span>
(MyBtn > simple text content) Click me and I don't visually focus title
</my-btn>
The text was updated successfully, but these errors were encountered:
I've created a simple web component that lets you create a custom button.
When clicked, I want the page title to be focused.
With button tag and a simple text content inside, the title is not visually focused. Same with my web component (in slot). That's cool.
With button tag and a tag span inside, the title is not visually focused. But, the title is visually focused with my web component (in slot). That's not cool.
I don't understand why the title is visually focused (which I don't want it to be), when I click on the lightDom element (e.g. the span). This doesn't happen when I click on my component directly (the shadowDOM part).
I expect my title to be focus but not visible-focus, without hiding by forcing.
I tried to look at this thread too: Why is focus-visible applied on page load
The text was updated successfully, but these errors were encountered: