diff --git a/README.md b/README.md index 3ce61d02..b70ccfc4 100644 --- a/README.md +++ b/README.md @@ -297,6 +297,8 @@ _As defined by CSS 4 and / or jQuery._ - [`:scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope): Selects elements that are part of the scope of the current selector. This uses the context from the passed options. + - [`:host`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host): + Alias of `:scope`, selecting elements in the current context. --- diff --git a/src/pseudo-selectors/aliases.ts b/src/pseudo-selectors/aliases.ts index eeaae33c..728ea610 100644 --- a/src/pseudo-selectors/aliases.ts +++ b/src/pseudo-selectors/aliases.ts @@ -11,6 +11,8 @@ const textControl = * Aliases are pseudos that are expressed as selectors. */ export const aliases: Record = { + host: ":scope", + // Links "any-link": ":is(a, area, link)[href]", diff --git a/test/pseudo-classes.ts b/test/pseudo-classes.ts index 92a58545..b73ac0bb 100644 --- a/test/pseudo-classes.ts +++ b/test/pseudo-classes.ts @@ -129,6 +129,26 @@ describe("unmatched", () => { }); }); +describe(":host", () => { + it("should match the root element", () => { + const matches = CSSselect.selectAll(":host", dom); + + expect(matches).toHaveLength(1); + expect(matches).toStrictEqual([dom[0]]); + }); + + it("should match context elements", () => { + const p = CSSselect.selectOne("p", dom); + + expect(p).not.toBeNull(); + expect( + CSSselect.selectAll(":host", dom, { + context: [p as Element], + }), + ).toStrictEqual([p]); + }); +}); + describe(":first-child", () => { it("should match", () => { const matches = CSSselect.selectAll(":first-child", dom);