feat: add :root structural pseudo-class

README.md

@@ -120,6 +120,32 @@ result === [
 
 ```
 
+You can use the `:root` selector to select the current element, e.g.
+
+```js
+const document = `
+  <article class='foo'>A</article>
+  <article class='bar'>B</article>
+`;
+
+const result = x('article {0,}', {
+  className: x(':root @class'),
+  textContent: x(':root')
+})(document);
+
+result === [
+  {
+    className: 'foo',
+    textContent: 'A'
+  },
+  {
+    className: 'bar',
+    textContent: 'B'
+  }
+];
+
+```
+
 ### Validate the result
 
 Validation is performed using regular expression.

src/evaluators/browserEvaluator.js

@@ -21,6 +21,10 @@ export default (): EvaluatorType => {
   };
 
   const querySelectorAll = (node: HTMLElement, selector: string) => {
+    if (selector.startsWith(':root')) {
+      return node;
+    }
+
     return [].slice.apply(node.querySelectorAll(selector));
   };
 

src/evaluators/cheerioEvaluator.js

@@ -27,6 +27,10 @@ export default (): EvaluatorType => {
   };
 
   const querySelectorAll = (node: string | Object, selector: string) => {
+    if (selector.startsWith(':root')) {
+      return cheerio(node);
+    }
+
     return cheerio(selector, node).toArray();
   };
 

test/expressions/nesting.js

@@ -74,3 +74,31 @@ test('matches multiple descendant nodes', (t) => {
     }
   ]);
 });
+
+test(':root selector accesses attributes and properties of the current element', (t) => {
+  const x = surgeon();
+
+  const document = `
+  <article class='foo'>A</article>
+  <article class='bar'>B</article>
+  `;
+
+  const result = x('article {0,}', {
+    className: x(':root @class'),
+    tagName: x(':root @.tagName'),
+    textContent: x(':root')
+  })(document);
+
+  t.deepEqual(result, [
+    {
+      className: 'foo',
+      tagName: 'ARTICLE',
+      textContent: 'A'
+    },
+    {
+      className: 'bar',
+      tagName: 'ARTICLE',
+      textContent: 'B'
+    }
+  ]);
+});