Merge branch 'master' of github.com:javascript-tutorial/en.javascript.info
This commit is contained in:
commit
225a36fd55
5 changed files with 7 additions and 22 deletions
|
@ -46,7 +46,7 @@ alert(3 +
|
|||
+ 2);
|
||||
```
|
||||
|
||||
The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so the semicolon is not required. And in this case that works as intended.
|
||||
The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended.
|
||||
|
||||
**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**
|
||||
|
||||
|
|
|
@ -192,7 +192,7 @@ There's a finished JavaScript proposal, almost in the standard, that provides la
|
|||
|
||||
Privates should start with `#`. They are only accessible from inside the class.
|
||||
|
||||
For instance, here's a private `#waterLimit` property and the water-checking private method `#checkWater`:
|
||||
For instance, here's a private `#waterLimit` property and the water-checking private method `#fixWaterAmount`:
|
||||
|
||||
```js run
|
||||
class CoffeeMachine {
|
||||
|
|
|
@ -45,7 +45,7 @@ For instance:
|
|||
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
|
||||
```
|
||||
|
||||
In the example the `DOMContentLoaded` handler runs when the document is loaded, so it can see all the elements, including `<img>` below.
|
||||
In the example, the `DOMContentLoaded` handler runs when the document is loaded, so it can see all the elements, including `<img>` below.
|
||||
|
||||
But it doesn't wait for the image to load. So `alert` shows zero sizes.
|
||||
|
||||
|
|
|
@ -111,22 +111,7 @@ customElements.define('custom-dialog', class extends HTMLElement {
|
|||
|
||||
Now the additional centering styles are only applied to the first dialog: `<custom-dialog centered>`.
|
||||
|
||||
## :host-context(selector)
|
||||
|
||||
Same as `:host`, but applied only if the shadow host or any of its ancestors in the outer document matches the `selector`.
|
||||
|
||||
E.g. `:host-context(.dark-theme)` matches only if there's `dark-theme` class on `<custom-dialog>` on anywhere above it:
|
||||
|
||||
```html
|
||||
<body class="dark-theme">
|
||||
<!--
|
||||
:host-context(.dark-theme) applies to custom-dialogs inside .dark-theme
|
||||
-->
|
||||
<custom-dialog>...</custom-dialog>
|
||||
</body>
|
||||
```
|
||||
|
||||
To summarize, we can use `:host`-family of selectors to style the main element of the component, depending on the context. These styles (unless `!important`) can be overridden by the document.
|
||||
To summarize, we can use `:host`-family of selectors to style the main element of the component. These styles (unless `!important`) can be overridden by the document.
|
||||
|
||||
## Styling slotted content
|
||||
|
||||
|
@ -317,7 +302,7 @@ Shadow DOM can include styles, such as `<style>` or `<link rel="stylesheet">`.
|
|||
|
||||
Local styles can affect:
|
||||
- shadow tree,
|
||||
- shadow host with `:host`-family pseudoclasses,
|
||||
- shadow host with `:host` and `:host()` pseudoclasses,
|
||||
- slotted elements (coming from light DOM), `::slotted(selector)` allows to select slotted elements themselves, but not their children.
|
||||
|
||||
Document styles can affect:
|
||||
|
|
|
@ -65,7 +65,7 @@ There are 3 differences from `match`:
|
|||
|
||||
1. It returns an iterable object with matches instead of an array. We can make a regular array from it using `Array.from`.
|
||||
2. Every match is returned as an array with capturing groups (the same format as `str.match` without flag `pattern:g`).
|
||||
3. If there are no results, it returns not `null`, but an empty iterable object.
|
||||
3. If there are no results, it returns an empty iterable object instead of `null`.
|
||||
|
||||
Usage example:
|
||||
|
||||
|
@ -247,7 +247,7 @@ alert('12-34-56'.replaceAll("-", ":")) // 12:34:56
|
|||
|
||||
## regexp.exec(str)
|
||||
|
||||
The method `regexp.exec(str)` method returns a match for `regexp` in the string `str`. Unlike previous methods, it's called on a regexp, not on a string.
|
||||
The `regexp.exec(str)` method returns a match for `regexp` in the string `str`. Unlike previous methods, it's called on a regexp, not on a string.
|
||||
|
||||
It behaves differently depending on whether the regexp has flag `pattern:g`.
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue