Properties > Targets

Selector

The selector can be any valid CSS3 selector:

...
selector: '.count',
...

Updates are made to all matches for the given selector:

// updates are applied to all elements with a class of `count`
component.querySelectorAll(selector);

Multiple selectors can be used:

...
// matches all elements with a class of `count` or `name`
selector: '.count, .name',
...

By default the selector is applied to the component's Light DOM. To apply the selector to the component's Shadow DOM instead, prefix the selector with a $:

...
// match elements in the Shadow DOM with a class of `count`
selector: '$.count',
...

Note that a selector prefixed with a $ applies the whole selector to the Shadow DOM:

...
// matches all elements with a class of `count` or `name
// in the Shadow DOM
selector: '$.count, .name',
...

To select the component itself as the target for an update you can use a value of self:

...
// updates will be applied to the component itself
selector: 'self',
...

Sometimes you may want to update element(s) outside of the component. Prefixing the selector with @ will apply the selector to the document:

...
// match all elements in the current document with a class of `count`
selector: '@.count',
...

selector can also be passed a function that receives the property value as an argument and should return the selector:

...
// if the property value was 3, this would match all elements with a
// data-id attribute === '3'
selector: (value) => {
  return `$[data-id="${value}"]`;
},
...