In Shadow DOM & custom root Fallback selector is used when a better selector is available #173

niranjan94 · 2022-01-01T10:58:11Z

The test page

<body>
    <div id="shadow-host">
    </div>
    <script>
        var shadow = document.querySelector('#shadow-host').attachShadow({mode: 'open'});
        shadow.innerHTML = '<div id=shadow-content><p>Shadow Root</p><div id="nested-shadow-host"></div></div>';
        var nestedShadow = shadow.querySelector('#nested-shadow-host').attachShadow({mode: 'open'});
        nestedShadow.innerHTML = '<div id="nested-shadow-content"><p>Nested Shadow Root</p></div>';
    </script>
</body>

Test cases:

1. Element outside the shadow DOM (Works)

var shadowHostEl = document.getElementById("shadow-host");
return getCssSelector(shadowHostEl)

Returns #shadow-host ✅

2. Element inside the shadow DOM with the shadow root as the custom root (Works)

var shadowHostEl = document.getElementById("shadow-host");
var levelOneRoot = shadowHostEl.shadowRoot;
var levelOneEl = levelOneRoot.querySelector("p");

return getCssSelector(levelOneEl, { root: levelOneRoot})

Returns p ✅

3. Another shadow host in shadow DOM with the shadow root as the custom root (Fails)

var shadowHostEl = document.getElementById("shadow-host");
var levelOneRoot = shadowHostEl.shadowRoot;
var levelOneEl = levelOneRoot.getElementById("nested-shadow-host");

return getCssSelector(levelOneEl, { root: levelOneRoot})

Returns :root > :nth-child(1) > :nth-child(2) ❌
Expected #nested-shadow-host ✅

Awesome library btw 😄
Very useful.

The text was updated successfully, but these errors were encountered:

fczbkk · 2022-01-02T16:07:52Z

Hey @niranjan94, thanks for the report.

This is an interesting situation. If the root node is not defined, I was using the :root element of the current document. But in case of Shadow DOM elements, that will never find any valid selector, because they can only be selected within the shadow root node. That's why it was always returning a fallback selector.

I have changed the root finding functionality so that it will use getRootNode() if possible. Which means that looking for a selector of an element within Shadow DOM will no longer always use fallback.

But this led me to realisation that we can have situations when the returned selector may not be what the users are expecting. E.g. when they expect to use document.querySelector() to get element within Shadow DOM, it will not work. The same will happen when they will look for a selector for element which is inside one shadow root and use different shadow root in options. So I have also added warning with explanation when something like that happens.

I have released v3.5.1, which should fix this. Please update your dependency.

I'm closing the issue now. Please feel free to reopen or file a new bug when you encounter more problems with Shadow DOM. I'm pretty sure there will be plenty of special cases.

niranjan94 · 2022-01-03T07:03:36Z

@fczbkk thank you for the super-fast response and fix. 😄
While this fix does improve support for Shadow DOM, doesn't fix the original issue. I have raised a draft PR with the failing case as a test case. #175

refs #173

fczbkk · 2022-01-10T12:41:15Z

Hey @niranjan94, I finally found out the problem. Previous changes to accommodate ShadowDOM worked fine. But there was a bug with ID selector. It was still checking against document root, even if the element was inside shadow root.

This should be fixed in v3.5.2.

niranjan94 · 2022-01-10T13:00:43Z

@fczbkk thanks for the fix 😄 I can confirm this works as expected now

fczbkk self-assigned this Jan 2, 2022

fczbkk added the bug label Jan 2, 2022

fczbkk changed the title ~~[Bug] In Shadow DOM & custom root Fallback selector is used when a better selector is available~~ In Shadow DOM & custom root Fallback selector is used when a better selector is available Jan 2, 2022

fczbkk closed this as completed Jan 2, 2022

niranjan94 mentioned this issue Jan 3, 2022

Add failing test case for shadow DOM selector generation #175

Merged

fczbkk added a commit that referenced this issue Jan 10, 2022

fix: ID selector withing shadow DOM

65535da

refs #173

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In Shadow DOM & custom root Fallback selector is used when a better selector is available #173

In Shadow DOM & custom root Fallback selector is used when a better selector is available #173

niranjan94 commented Jan 1, 2022 •

edited

Loading

fczbkk commented Jan 2, 2022 •

edited

Loading

niranjan94 commented Jan 3, 2022

fczbkk commented Jan 10, 2022

niranjan94 commented Jan 10, 2022

In Shadow DOM & custom root Fallback selector is used when a better selector is available #173

In Shadow DOM & custom root Fallback selector is used when a better selector is available #173

Comments

niranjan94 commented Jan 1, 2022 • edited Loading

Test cases:

1. Element outside the shadow DOM (Works)

2. Element inside the shadow DOM with the shadow root as the custom root (Works)

3. Another shadow host in shadow DOM with the shadow root as the custom root (Fails)

fczbkk commented Jan 2, 2022 • edited Loading

niranjan94 commented Jan 3, 2022

fczbkk commented Jan 10, 2022

niranjan94 commented Jan 10, 2022

niranjan94 commented Jan 1, 2022 •

edited

Loading

fczbkk commented Jan 2, 2022 •

edited

Loading