Skip to content

Fix: (Update web-component.md) Fixed some typographical errors on the mentioned page #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 10, 2025
Merged

Fix: (Update web-component.md) Fixed some typographical errors on the mentioned page #27

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions docs/documentation/capabilities/web-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,10 @@ class CounterApp extends WebComponent<Props, State> {
customElements.define('counter-app', CounterApp)
```

In your HTML you can simply use the tag normally.
In your HTML, you can simply use the tag normally.

```html
<counter-app label="count up"></counter-app>m
<counter-app label="count up"></counter-app>
```

### Installation
Expand Down Expand Up @@ -115,7 +115,7 @@ customElements.define('my-button', MyButton)

### Config

You can configure very few basic stuff about your component that will determine how your component will be rendered.
You can configure very few basic things about your component that will determine how your component will be rendered.

#### ShadowRoot

Expand All @@ -135,7 +135,7 @@ customElements.define('my-button', MyButton)

#### ShadowRoot options

You can specific any [attachShadow options](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options) in the config object and they are all optional. The default matches their native default values.
You can specify any [attachShadow options](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options) in the config object, and they are all optional. The default matches their native default values.

```javascript
class MyButton extends WebComponent {
Expand Down Expand Up @@ -174,7 +174,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

In the render method you can return anything: a string, a [DOM Node](https://developer.mozilla.org/en-US/docs/Web/API/Node), a [Markup template](../templating/index.md), a `null` value, or nothing at all. Some components can just handle some internal logic and dont need to render anything but their tags.
In the render method, you can return anything: a string, a [DOM Node](https://developer.mozilla.org/en-US/docs/Web/API/Node), a [Markup template](../templating/index.md), a `null` value, or nothing at all. Some components can just handle some internal logic and don't need to render anything but their tags.

### Stylesheet

Expand All @@ -191,7 +191,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

Where the style is added will depend on whether the shadow option is true or false. If the component has shadow style will be added to its own [content root](./web-component.md#content-root). Otherwise, style will be added to the closest root node the component was rendered in. It can be the document itself or [root](./web-component.md#root) of an ancestor web component.
Where the style is added will depend on whether the shadow option is true or false. If the component has a shadow style, it will be added to its own [content root](./web-component.md#content-root). Otherwise, style will be added to the closest root node in which the component was rendered. It can be the document itself or [root](./web-component.md#root) of an ancestor web component.

#### css

Expand All @@ -212,7 +212,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

It helps your IDE give you better CSS syntax highlight and autocompletion but it does not perform any computation to your CSS at this point.
It helps your IDE give you better CSS syntax highlighting and autocompletion, but it does not perform any computation on your CSS at this point.

#### updateStylesheet

Expand All @@ -230,7 +230,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

To define the default values for your props, simply define a property in the class with same name and provide the value.
To define the default values for your props, simply define a property in the class with the same name and provide the value.

```javascript
class MyButton extends WebComponent {
Expand Down Expand Up @@ -271,11 +271,11 @@ customElements.define('my-button', MyButton)

### State

The state is based on [Markup state](../state/index.md) which means it will pair up with your template just fine.
The state is based on [Markup state](../state/index.md), which means it will pair up with your template just fine.

#### initialState

To start using state in your component simply define the initial state with the `initialState` property.
To start using state in your component, simply define the initial state with the `initialState` property.

```typescript
interface State {
Expand All @@ -293,7 +293,7 @@ customElements.define('my-button', MyButton)

#### setState

If you have state, you will need to update it. To do that you can call the `setState` method with a whole or partially new state object or simply a callback function that returns the state.
If you have a state, you will need to update it. To do that, you can call the `setState` method with a whole or partially new state object or simply a callback function that returns the state.

```typescript
interface State {
Expand All @@ -317,7 +317,7 @@ class MyButton extends WebComponent<{}, State> {
customElements.define('my-button', MyButton)
```

if you provide a partial state object it will be merged with the current state object. No need to spread state when updating it.
If you provide a partial state object, it will be merged with the current state object. No need to spread state when updating it.

You can also provide a callback so you can access the current state data.

Expand Down Expand Up @@ -352,7 +352,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

This `dispatch` method also takes a second argument which can be the data you want to expose with the event.
This `dispatch` method also takes a second argument, which can be the data you want to expose with the event.

```javascript
this.dispatch('change', { value })
Expand All @@ -378,7 +378,7 @@ customElements.define('my-button', MyButton)

You may always use the `mounted` property to check if the component is in the DOM or not.

You have the option to return a function to perform cleanups which is executed like [onDestroy](./web-component.md#onDesctroy).
You have the option to return a function to perform cleanups, which is executed like [onDestroy](./web-component.md#onDesctroy).

```javascript
class MyButton extends WebComponent {
Expand Down Expand Up @@ -408,7 +408,7 @@ customElements.define('my-button', MyButton)

#### onUpdate

The `onUpdate` method is called whenever the component props are updated via the `setAttribute` or changing the props property on the element instance directly.
The `onUpdate` method is called whenever the component props are updated via the `setAttribute` or by changing the props property on the element instance directly.

```javascript
class MyButton extends WebComponent {
Expand All @@ -420,7 +420,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

The method will always tell you, which prop and its new and old value.
The method will always tell you which prop and its new and old values.

#### onAdoption

Expand All @@ -438,7 +438,7 @@ customElements.define('my-button', MyButton)

#### onError

The `onError` method is called whenever the component fails to perform internal actions. These action can also be related to code executed inside any lifecycle methods, render, state or style update.
The `onError` method is called whenever the component fails to perform internal actions. These actions can also be related to code executed inside any lifecycle methods, render, state or style update.

```javascript
class MyButton extends WebComponent {
Expand Down Expand Up @@ -466,7 +466,7 @@ class MyButton extends WebComponent {
customElements.define('my-button', MyButton)
```

You can also enhance components so all errors are handled in the same place.
You can also enhance components so that all errors are handled in the same place.

```javascript
// have your global componenent that extends WebComponent
Expand Down Expand Up @@ -526,8 +526,8 @@ const field = new TextField()
field.contentRoot // ShadowRoot object
```

This is not to be confused with the Node returned by calling the [getRootNode()](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode) on an element. The getRootNode will return the element context root node and contentRoot will contain the node where the template was rendered to.
This is not to be confused with the Node returned by calling the [getRootNode()](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode) on an element. The getRootNode will return the element context root node, and contentRoot will contain the node where the template was rendered to.

### Root

The `root` tells you about where the component was rendered at. It can either be the document itself, or the ancestor element shadow root.
The `root` tells you about where the component was rendered. It can either be the document itself or the ancestor element shadow root.