Add example on using Sizzle to run CSS selector queries

README.md

@@ -72,6 +72,8 @@ This library does not implement CSS selectors, which means no `querySelector` /
 
 To query a slimdom document using XPath or XQuery, use [FontoXPath][fontoxpath].
 
+To query a slimdom document using CSS, see [this example][sizzle-example] which shows how to use [sizzle][sizzle] to run queries using CSS selectors.
+
 ### HTML & browser-specific features and behavior
 
 Emulating a full browser environment is not the goal of this library. Consider using [jsdom][jsdom] instead if you need that.
@@ -100,6 +102,8 @@ The following features are missing simply because I have not yet had a need for
 [parse5-example]: https://github.com/bwrrp/slimdom.js/tree/main/test/examples/parse5
 [parse5]: https://github.com/inikulin/parse5
 [dom-treeadapter]: https://github.com/RReverser/dom-treeadapter
+[sizzle-example]: https://github.com/bwrrp/slimdom.js/tree/master/test/examples/sizzle
+[sizzle]: https://github.com/jquery/sizzle
 [jsdom]: https://github.com/jsdom/jsdom
 
 ## Contributing

package.json

@@ -45,6 +45,7 @@
 		"rollup": "^2.38.1",
 		"rollup-plugin-sourcemaps": "^0.6.3",
 		"rollup-plugin-terser": "^7.0.2",
+		"sizzle": "^2.3.5",
 		"ts-jest": "~26.5.0",
 		"typescript": "^4.1.3"
 	},

test/examples/sizzle/sizzle.d.ts

@@ -0,0 +1 @@
+declare module 'sizzle';

test/examples/sizzle/sizzle.tests.ts

@@ -0,0 +1,23 @@
+import * as slimdom from '../../../src/index';
+
+import Sizzle = require('sizzle');
+
+describe('Example: sizzle integration', () => {
+	it('can use CSS selectors using Sizzle', () => {
+		const document = new slimdom.Document();
+		const root = document.appendChild(document.createElement('root'));
+		const p1 = root.appendChild(document.createElement('p'));
+		const p2 = root.appendChild(document.createElement('p'));
+		const p3 = root.appendChild(document.createElement('p'));
+		const div = root.appendChild(document.createElement('div'));
+		const p4 = div.appendChild(document.createElement('p'));
+		p1.setAttribute('id', 'header');
+		p4.setAttribute('class', 'footer');
+
+		expect(Sizzle('p', document)).toEqual([p1, p2, p3, p4]);
+		expect(Sizzle('div p', document)).toEqual([p4]);
+		expect(Sizzle('p ~ p', document)).toEqual([p2, p3]);
+		expect(Sizzle('#header', document)).toEqual([p1]);
+		expect(Sizzle('.footer', document)).toEqual([p4]);
+	});
+});