Options
All
  • Public
  • Public/Protected
  • All
Menu

Class BooleanSelector

Boolean selector is an HTML boolean attribute value format that allows developers to write configurations for elements deep in a shadow DOM. Here's what it looks like:

direct-child-one:nested-child:not=descendant-one,descendant-two direct-child-two

When used with the "disabled" attribute, the code above could translate to: "Disable everything except for the descendant-one and descendant-two in the nested-child that belongs to direct-child-one; disable direct-child-two entirely."

Boolean selector is always a list, where items are separated by whitespace (as much as you need, including line breaks):

item-one item-two item-three

Each item is a path that consists of identifiers (lowercase characters from a to z or a dash) separated by a colon:

parent:child:nested-child

By default, only specified paths will be selected. To select everything except for certain paths, add the not= modifier to the end of the path (or at the top level):

parent:child:not=exception

You can specify multiple values by separating them with a comma and optionally a whitespace:

parent:child:not=exception-one, exception-two

Only lowercase a-z letters, colon, comma, dash and whitespace are allowed in the selectors. An attempt to use a character outside of this set will result in a SyntaxError.

Hierarchy

  • BooleanSelector

Index

Constructors

Accessors

Methods

Constructors

constructor

Accessors

Static False

  • Helper selector that doesn't match any identifier on any level.

    example

    BooleanSelector.False.matches('anything') // => false BooleanSelector.False.zoom('thing').matches('stuff') // => false

    Returns BooleanSelector

    BooleanSelector singleton

Static True

  • Helper selector that matches any identifier on any level.

    example

    BooleanSelector.True.matches('anything') // => true BooleanSelector.True.zoom('thing').matches('stuff') // => true

    Returns BooleanSelector

    BooleanSelector singleton

Methods

matches

  • matches(id: string, isFullMatch?: boolean): boolean

  • Checks if current selector includes rules for the given top-level identifier.

    example

    new BooleanSelector('foo').matches('foo') // => true new BooleanSelector('foo').matches('foo', true) // => true new BooleanSelector('foo').matches('bar') // => false new BooleanSelector('foo:bar').matches('foo') // => true new BooleanSelector('foo:bar').matches('foo', true) // => false new BooleanSelector('foo:bar').matches('bar') // => false

    Parameters

    • id: string

      identifier to look for

    • isFullMatch: boolean = false

    Returns boolean

    true is current selector includes rules for the given identifier

toAttribute

  • toAttribute(truthyValue?: string): null | string

  • Converts this selector to an attribute value.

    example

    new BooleanSelector('foo:bar').toAttribute() // => "foo:bar" BooleanSelector.False.toAttribute() // => null BooleanSelector.True.toAttribute("disabled") // => "disabled" BooleanSelector.True.toAttribute() // => ""

    Parameters

    • truthyValue: string = ''

      attribute value for wildcard selectors (use attribute name here to be spec-compliant)

    Returns null | string

    attribute value representing this selector.

toString

  • toString(): string

  • Converts this selector to string.

    example

    new BooleanSelector('foo:bar').toString() // => "foo:bar"

    Returns string

    serialized representation of this selector

zoom

  • Zooms on the given top-level identifier or follows a path.

    example

    new BooleanSelector('foo:bar:baz').zoom('foo:bar').toString() // => "baz" new BooleanSelector('foo:bar:baz').zoom('foo').toString() // => "bar:baz" new BooleanSelector('not=foo').zoom('bar').toString() // => "not=*" new BooleanSelector('not=foo').zoom('foo').toString() // => ""

    Parameters

    • path: string

      path to look for

    Returns BooleanSelector

    zoomed BooleanSelector

Static fromAttribute

  • Creates a BooleanSelector instance from an attribute value according to the following rules:

    • null will be parsed as empty string;
    • empty string or truthyValue will be parsed as :not=* ;
    • in every other case attribute value will be parsed as regular boolean selector.
    example

    const value = element.getAttribute('disabled'); BooleanSelector.fromAttribute(value) // => [object BooleanSelector]

    Parameters

    • value: null | string

      attribite value

    • Optional truthyValue: string

      additional attribute value that must be treated as truthy (use attribute name here to be spec-compliant)

    Returns BooleanSelector

    BooleanSelector instance constructed from the given attribite value

Generated using TypeDoc