There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
This may take a few seconds.

Events in Components

You can write events specifically for components.

There are two ways to handle events in components:

  1. A components that has private events. This means that any events that you write will only take action on that component and any inner component. This is mostly used for an outer component that may or may not have inner sub-components. A sub-component is just a regular component rendered inside an outer component.
  2. 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.

Both types of component follow the same format, but for private events the component needs the "privateEvents" option.

Here is an example:

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

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

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

If the privateEvents option was not used in that example, 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 privateEvents option will inherit the events from the upper component. It's like the component has it's own personal DOM. But general CSS rules still apply - this scoping is just for events, so you can still use your stylesheet.

If you want isolated CSS to apply to that component, you would use the shadow option which turns the component into a shadow DOM component. This is covered in a later section.