There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

Events in Components

You can write events specifically for components.

There are three ways to set up your component for handling events:

  1. A component set with the option strictlyPrivateEvents. Inner elements in this component cannot be affected by outside events. This means that any events that you write will only take action on that component and any inner component.
  2. A component set with the option privateEvents. This type of component will allow its inner elements to be affected by outside events. But, any events that you write inside the component itself will only apply to that component and any inner components.
  3. A component that shares events with any surrounding components or the DOM. This is most useful when writing components that are nested inside a main component. It makes it easier to reference elements in an outer scope. But if you were writing events for the DOM scope, or in other words the document scope, you would normally just write regular events outside of the component for clarity and not write the events inside a component.

All types of components follow the same format.

Here is an example of a fully encapsulated component:

@component helloWorld strictlyPrivateEvents {
button:click {
alert: "Hello world";
}
html {
<button>Click me</button>
}
}

You can use all the regular events inside the component in the same way as above.

In that example, because of the use of the strictlyPrivateEvents option, the button click event will only apply to that component. It will not affect buttons outside of the component.

If the strictlyPrivateEvents option was not used in that example, nor the privateEvents option, the button click event would apply to all buttons outside the component too, including the document, so this is why it is better to just write events outside of the component in the usual document scope to make things clearer for yourself if you are writing events for the page rather than for a component.

Inner components that are not given the strictlyPrivateEvents option will inherit the events from the upper component. It's like the component has it's own personal DOM. CSS stylesheet rules are unaffected by these types of components.

Shadow DOM use

If you want isolated CSS to apply to a component, you would use the shadow option which turns the component into a shadow DOM component.

All shadow DOM components follow the behaviour of the strictlyPrivateEvents option, regardless of what option you choose. This follows the native rules of shadow DOMs and events.

The private option

Using private as an option is a shorthand for privateEvents and privateVars.

The strictlyPrivate option

Using strictlyPrivate as an option is a shorthand for strictlyPrivateEvents and strictlyPrivateVars.