You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/_guide/actions.md
+2-14Lines changed: 2 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,21 +5,9 @@ subtitle: Binding Events
5
5
6
6
Catalyst Components automatically bind actions upon instantiation. Automatically as part of the `connectedCallback`, a component will search for any children with the `data-action` attribute, and bind events based on the value of this attribute. Any _public method_ on a Controller can be bound to via `data-action`.
Copy file name to clipboardExpand all lines: docs/_guide/attrs.md
+2-14Lines changed: 2 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -133,21 +133,9 @@ When an element gets connected to the DOM, the attr is initialized. During this
133
133
- When connected, if the element _does not_ have a matching attribute, the default _is_ applied.
134
134
- When connected, if the element _does_ have a matching attribute, the default _is not_ applied, the property will be assigned to the value of the attribute instead.
Remember! The values defined in the class field are the _default_. They won't be set if the element is created and its attribute set to a custom value!
Copy file name to clipboardExpand all lines: docs/_guide/rendering.md
+4-28Lines changed: 4 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,21 +5,9 @@ subtitle: Rendering HTML subtrees
5
5
6
6
Sometimes it's necessary to render an HTML subtree as part of a component. This can be especially useful if a component is driving complex UI that is only interactive with JS.
Remember to _always_ make your JavaScript progressively enhanced, where possible. Using JS to render large portions of the UI, that could be rendered server-side is an anti-pattern; it can be difficult for users to interact with - especially users who disable JS, or when JS fails to load, or those using assistive technologies. Rendering on the client can also impact the [CLS Web Vital](https://web.dev/cls/).
20
-
21
-
</div>
22
-
</div>
10
+
{% endcapture %}{% include callout.md %}
23
11
24
12
By leveraging the native [`ShadowDOM`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) feature, Catalyst components can render complex sub-trees, fully encapsulated from the rest of the page.
25
13
@@ -55,21 +43,9 @@ class HelloWorldElement extends HTMLElement {
55
43
56
44
Providing the `<template data-shadowroot>` element as a direct child of the `hello-world` element tells Catalyst to render the templates contents automatically, and so all `HelloWorldElements` with this template will be rendered with the contents.
Remember that _all_ instances of your controller _must_ add the `<template data-shadowroot>` HTML. If an instance does not have the `<template data-shadowroot>` as a direct child, then the shadow DOM won't be rendered for it!
70
-
71
-
</div>
72
-
</div>
48
+
{% endcapture %}{% include callout.md %}
73
49
74
50
### Updating a Template element using JS templates
Remember! There are two decorators available, `@target` which fetches only one `data-target` element, and `@targets` which fetches multiple `data-targets` elements!
65
-
66
-
</div>
67
-
</div>
55
+
{% endcapture %}{% include callout.md %}
68
56
69
57
The `@target` decorator will only ever return _one_ element, just like `querySelector`. If you want to get multiple Targets, you need the `@targets` decorator which works almost the same, but returns an Array of elements, and it searches the `data-targets` attribute (not `data-target`).
Copy file name to clipboardExpand all lines: docs/_guide/your-first-component.md
+2-14Lines changed: 2 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,21 +22,9 @@ Catalyst will automatically convert the classes name; removing the trailing `Ele
22
22
23
23
By convention Catalyst controllers end in `Element`; Catalyst will omit this when generating a tag name. The `Element` suffix is _not_ required - just convention. All examples in this guide use `Element` suffixed names.
Remember! A class name _must_ include at least two CamelCased words (not including the `Element` suffix). One-word elements will raise exceptions. Example of good names: `UserListElement`, `SubTaskElement`, `PagerContainerElement`
0 commit comments