diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index 331511d3..d0a322f9 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -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 ``, 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 ``, 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 ``, 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 `