jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge branch 'master' of github.com:javascript-tutorial/en.javascript.info

Browse source
This commit is contained in:
Ilya Kantor 2021-06-13 11:05:24 +03:00
commit 225a36fd55
5 changed files with 7 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/02-first-steps/02-structure/article.md
View file

@ -46,7 +46,7 @@ alert(3 +
+ 2); + 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.** **But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**

2
1-js/09-classes/04-private-protected-properties-methods/article.md
View file

@ -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. 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 ```js run
class CoffeeMachine { class CoffeeMachine {

2
2-ui/5-loading/01-onload-ondomcontentloaded/article.md
View file

@ -45,7 +45,7 @@ For instance:
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0"> <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. But it doesn't wait for the image to load. So `alert` shows zero sizes.

19
8-web-components/6-shadow-dom-style/article.md
View file

@ -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>`. Now the additional centering styles are only applied to the first dialog: `<custom-dialog centered>`.
## :host-context(selector) 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.
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.
## Styling slotted content ## Styling slotted content
@ -317,7 +302,7 @@ Shadow DOM can include styles, such as `<style>` or `<link rel="stylesheet">`.
Local styles can affect: Local styles can affect:
- shadow tree, - 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. - slotted elements (coming from light DOM), `::slotted(selector)` allows to select slotted elements themselves, but not their children.
Document styles can affect: Document styles can affect:

4
9-regular-expressions/17-regexp-methods/article.md
View file

@ -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`. 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`). 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: Usage example:
@ -247,7 +247,7 @@ alert('12-34-56'.replaceAll("-", ":")) // 12:34:56
## regexp.exec(str) ## 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`. It behaves differently depending on whether the regexp has flag `pattern:g`.