如何通过CSS选择器定位Shadow Root内指定文本的元素？

一、精准定位指定文本的<mark>元素 #

CSS本身不支持直接匹配元素的文本内容（不像XPath有.='xxx'这种语法），所以你尝试的mark[.='Anthony Chamberlain']、mark[innerText='Anthony Chamberlain']这类写法都无法生效。在Shadow Root环境下，推荐两种可行方案：

1. 借助JavaScript脚本定位（最可靠） #

直接在Shadow Root上下文里遍历所有<mark>元素，匹配目标文本内容。对应Selenium代码可以这么写：

WebElement targetMark = (WebElement) driver.executeScript(
  "const shadowRoot = arguments[0].shadowRoot;" +
  "return Array.from(shadowRoot.querySelectorAll('mark')).find(el => el.textContent.trim() === 'Anthony Chamberlain');",
  shadowRootElement // 传入你的Shadow Root元素对象
);

这里用trim()处理文本，是为了避免文本前后的空格、换行符导致匹配失败，这个细节很关键。

2. 结合元素独有属性定位 #

如果<mark>元素有专属的class、data自定义属性（比如data-fullname="Anthony Chamberlain"），可以直接用CSS选择器缩小范围：

mark[data-fullname='Anthony Chamberlain']

但如果没有这类标识属性，优先用第一种方案。

二、定位<mark>的上层<div>元素 #

CSS没有父选择器，没法直接实现类似XPath//div[./mark[.='Anthony Chamberlain']]的逻辑，同样用JavaScript来完成：

WebElement parentDiv = (WebElement) driver.executeScript(
  "const shadowRoot = arguments[0].shadowRoot;" +
  "const markEl = Array.from(shadowRoot.querySelectorAll('mark')).find(el => el.textContent.trim() === arguments[1]);" +
  "return markEl ? markEl.closest('div') : null;",
  shadowRootElement,
  "Anthony Chamberlain"
);

closest('div')会找到离<mark>最近的上层div元素；如果需要定位更上层的div，可以换成markEl.parentElement多次调用，比如markEl.parentElement.parentElement。

额外提醒 #

你用mark选择器能找到第一个元素，说明Shadow Root的上下文是正确的，核心问题就是CSS不支持文本匹配，必须靠JavaScript补这个短板。

内容的提问来源于stack exchange，提问作者Tony