minor
This commit is contained in:
parent
7c340a1be5
commit
4a8d8987df
2 changed files with 49 additions and 23 deletions
|
@ -138,7 +138,7 @@ In the example above, element content is rendered (created) in `connectedCallbac
|
|||
|
||||
Why not in the `constructor`?
|
||||
|
||||
The reason is simple: when `constructor` is called, it's yet too early. The element instance is created, but not populated yet. The browser did not yet process/assign attributes at this stage: calls to `getAttribute` would return `null`. So we can't really render there.
|
||||
The reason is simple: when `constructor` is called, it's yet too early. The element is created, but the browser did not yet process/assign attributes at this stage: calls to `getAttribute` would return `null`. So we can't really render there.
|
||||
|
||||
Besides, if you think about it, that's better performance-wise -- to delay the work until it's really needed.
|
||||
|
||||
|
@ -242,7 +242,7 @@ customElements.define('user-info', class extends HTMLElement {
|
|||
|
||||
If you run it, the `alert` is empty.
|
||||
|
||||
That's exactly because there are no children on that stage, the DOM is unfinished. HTML parser connected the custom element `<user-info>`, and will now proceed to its children, but just didn't yet.
|
||||
That's exactly because there are no children on that stage, the DOM is unfinished. HTML parser connected the custom element `<user-info>`, and is going to proceed to its children, but just didn't yet.
|
||||
|
||||
If we'd like to pass information to custom element, we can use attributes. They are available immediately.
|
||||
|
||||
|
@ -297,12 +297,12 @@ Output order:
|
|||
|
||||
1. outer connected.
|
||||
2. inner connected.
|
||||
2. outer initialized.
|
||||
3. outer initialized.
|
||||
4. inner initialized.
|
||||
|
||||
We can clearly see that the outer element does not wait for the inner one.
|
||||
We can clearly see that the outer element finishes initialization `(3)` before the inner one `(4)`.
|
||||
|
||||
There's no built-in callback that triggers after nested elements are ready. But we can implement such thing on our own. For instance, inner elements can dispatch events like `initialized`, and outer ones can listen and react on them.
|
||||
There's no built-in callback that triggers after nested elements are ready. If needed, we can implement such thing on our own. For instance, inner elements can dispatch events like `initialized`, and outer ones can listen and react on them.
|
||||
|
||||
## Customized built-in elements
|
||||
|
||||
|
@ -310,7 +310,7 @@ New elements that we create, such as `<time-formatted>`, don't have any associat
|
|||
|
||||
But such things can be important. E.g, a search engine would be interested to know that we actually show a time. And if we're making a special kind of button, why not reuse the existing `<button>` functionality?
|
||||
|
||||
We can extend and customize built-in elements by inheriting from their classes.
|
||||
We can extend and customize built-in HTML elements by inheriting from their classes.
|
||||
|
||||
For example, buttons are instances of `HTMLButtonElement`, let's build upon it.
|
||||
|
||||
|
@ -324,7 +324,8 @@ For example, buttons are instances of `HTMLButtonElement`, let's build upon it.
|
|||
```js
|
||||
customElements.define('hello-button', HelloButton, *!*{extends: 'button'}*/!*);
|
||||
```
|
||||
There exist different tags that share the same class, that's why it's needed.
|
||||
|
||||
There may be different tags that share the same DOM-class, that's why specifying `extends` is needed.
|
||||
|
||||
3. At the end, to use our custom element, insert a regular `<button>` tag, but add `is="hello-button"` to it:
|
||||
```html
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue