PoC for shadow-piercing descendant combinator /deep/

packages/domutils/src/selector.ts

@@ -81,9 +81,33 @@ export namespace Selector {
  * #### Notes
  * This function uses the builtin browser capabilities when possible,
  * falling back onto a document query otherwise.
+ * This function supports the non-standard shadow-piercing descendant combinator (`/deep/`).
  */
  export function matches(element: Element, selector: string): boolean {
- return Private.protoMatchFunc.call(element, selector);
+ if (selector.includes('/deep/')) {
+ const parts = selector.split('/deep/');
+ if (parts.length > 2) {
+ throw Error(
+ 'Nested shadow DOM selector not supported (only one `/deep/` allowed)'
+ );
+ }
+ const shallowSelector = parts.join(' ');
+ if (Private.protoMatchFunc.call(element, shallowSelector)) {
+ return true;
+ }
+ const shadowRoot = element.getRootNode();
+ if (!(shadowRoot instanceof ShadowRoot)) {
+ return false;
+ }
+ const outer = parts[0];
+ const inner = parts[1];
+ return (
+ Private.protoMatchFunc.call(shadowRoot.host, outer) &&
+ Private.protoMatchFunc.call(element, inner)
+ );
+ } else {
+ return Private.protoMatchFunc.call(element, selector);
+ }
  }
 }
 

packages/domutils/tests/src/selector.spec.ts

@@ -143,19 +143,32 @@ describe('@lumino/domutils', () => {
  </div>
  </li>
  </ul>
+ <div class="parent">
+ </div>
  `;
  const list = div.firstElementChild!;
  const item = list.firstElementChild!;
  const content = item.firstElementChild!;
  const icon = content.firstElementChild!;
  const text = icon.nextElementSibling!;
+ const parent = div.children[1]!;
+ const shadowRoot = parent.attachShadow({ mode: 'open' });
+ shadowRoot.innerHTML = '<div class="shadow-child"></div>';
+ const shadowChild = shadowRoot.firstElementChild!;
 
  it('should return `true` if an element matches a selector', () => {
  expect(Selector.matches(div, 'div')).to.equal(true);
  expect(Selector.matches(list, '.list')).to.equal(true);
  expect(Selector.matches(item, '.list > .item')).to.equal(true);
  expect(Selector.matches(icon, '.content .icon')).to.equal(true);
  expect(Selector.matches(text, 'div span + .text')).to.equal(true);
+ expect(Selector.matches(shadowChild, '.shadow-child')).to.equal(true);
+ expect(
+ Selector.matches(shadowChild, '.parent /deep/ .shadow-child')
+ ).to.equal(true);
+ expect(Selector.matches(shadowChild, '/deep/ .shadow-child')).to.equal(
+ true
+ );
  });
 
  it('should return `false` if an element does not match a selector', () => {
@@ -164,6 +177,10 @@ describe('@lumino/domutils', () => {
  expect(Selector.matches(item, '.content > .item')).to.equal(false);
  expect(Selector.matches(icon, '.foo .icon')).to.equal(false);
  expect(Selector.matches(text, 'ol div + .text')).to.equal(false);
+ expect(Selector.matches(shadowChild, '.parent .shadow-child')).to.equal(
+ false
+ );
+ expect(Selector.matches(shadowChild, '.parent')).to.equal(false);
  });
  });
  });