\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | },
7 | {
8 | "name": "style",
9 | "type": "css",
10 | "content": "div { width: 100%; height: 100%; }"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/langs/de/tutorials/bindings_spreads/lesson.md:
--------------------------------------------------------------------------------
1 | Manchmal unterstützen die eigenen Komponenten eine variable Zahl an Attributen und es macht daher Sinn, diese als Objekt statt einzeln zu übergeben. Das ist besonders dann der Fall, wenn man ein DOM-Element in eine Komponente kapselt, eine gängige Praxis in Design-Systemen.
2 |
3 | Für diesen Fall können wir den Spread-Operator verwenden `...`.
4 |
5 | Wir können damit ein Objekt mit einer beliebigen Zahl von Eigenschaften übergeben:
6 |
7 | ```jsx
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/de/tutorials/bindings_style/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n const [num, setNum] = createSignal(0);\n setInterval(() => setNum((num() + 1) % 255), 30)\n\n return
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/de/tutorials/flow_dynamic/lesson.md:
--------------------------------------------------------------------------------
1 | Das ``-Tag ist nützlich, wenn man von Daten abhängig rendert. Es lässt einen entweder einen String für ein natives Element oder eine Komponenten-Funktion übergeben und rendert dieses mit dem Rest der übergebenen Props.
2 |
3 | Das ist häufig kompakter als eine Menge an ``- oder ``-Komponenten.
4 |
5 | In diesem Beispiel können wir die `Switch`-Anweisung ersetzen:
6 |
7 | ```jsx
8 | }>
9 |
10 |
11 |
12 | ```
13 |
14 | mit:
15 |
16 | ```jsx
17 |
18 | ```
19 |
--------------------------------------------------------------------------------
/langs/de/tutorials/flow_error_boundary/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { ErrorBoundary } from \"solid-js\";\n\nconst Broken = (props) => {\n throw new Error(\"Oh No\");\n return <>Never Getting Here\n}\n\nfunction App() {\n return (\n <>\n
Before
\n \n
After
\n \n );\n}\n\nrender(() => , document.getElementById(\"app\"));\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/de/tutorials/flow_error_boundary/lesson.md:
--------------------------------------------------------------------------------
1 | Ein JavaScript-Fehler aus dem User Interface sollte nicht die ganze App kaputt machen. Fehlerbegrenzungen (Error Boundaries) sind Komponenten, die solche Fehler aus ihren Kind-Elementen auffangen, die Fehler vermerken und eine Ausweichansicht anzeigen statt des kaputten Komponentenbaumes.
2 |
3 | Eine Komponente hat unser Beispiel kaputtgemacht. Wir stecken sie in eine Fehlerbegrenzung, die den Fehler anzeigt.
4 |
5 | ```jsx
6 | err}>
7 |
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/de/tutorials/flow_error_boundary/solved.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { ErrorBoundary } from \"solid-js\";\n\nconst Broken = (props) => {\n throw new Error(\"Oh No\");\n return <>Never Getting Here\n}\n\nfunction App() {\n return (\n <>\n
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | },
7 | {
8 | "name": "style",
9 | "type": "css",
10 | "content": "div { width: 100%; height: 100%; }"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/langs/en/tutorials/bindings_spreads/lesson.md:
--------------------------------------------------------------------------------
1 | Sometimes your components and elements accept a variable number of attributes and it makes sense to pass them down as an object instead of individually. This is especially true when wrapping a DOM element in a component, a common practice when making design systems.
2 |
3 | For this we use the spread operator `...`.
4 |
5 | We can pass an object with a variable number of properties:
6 |
7 | ```jsx
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/en/tutorials/bindings_style/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n const [num, setNum] = createSignal(0);\n setInterval(() => setNum((num() + 1) % 255), 30)\n\n return
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_dynamic/lesson.md:
--------------------------------------------------------------------------------
1 | The `` tag is useful when you render from data. It lets you pass either a string for a native element or a component function and it will render that with the rest of the provided props.
2 |
3 | This is often more compact than writing a number of `` or `` components.
4 |
5 | In the example, we can replace the `` statement:
6 |
7 | ```jsx
8 | }>
9 |
10 |
11 |
12 | ```
13 |
14 | with:
15 |
16 | ```jsx
17 |
18 | ```
19 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_error_boundary/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { ErrorBoundary } from \"solid-js\";\n\nconst Broken = (props) => {\n throw new Error(\"Oh No\");\n return <>Never Getting Here\n}\n\nfunction App() {\n return (\n <>\n
Before
\n \n
After
\n \n );\n}\n\nrender(() => , document.getElementById(\"app\"));\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_error_boundary/lesson.md:
--------------------------------------------------------------------------------
1 | A JavaScript error originating in the UI shouldn’t break the whole app. Error boundaries are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
2 |
3 | A component has crashed our example. Let's wrap it in an Error Boundary that displays the error.
4 |
5 | ```jsx
6 | err}>
7 |
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_error_boundary/solved.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { ErrorBoundary } from \"solid-js\";\n\nconst Broken = (props) => {\n throw new Error(\"Oh No\");\n return <>Never Getting Here\n}\n\nfunction App() {\n return (\n <>\n
\n );\n}\n\nrender(() => , document.getElementById('app'))\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_portal/lesson.md:
--------------------------------------------------------------------------------
1 | Sometimes it's beneficial to insert elements outside the normal flow of the app. Z-indexes are sometimes insufficient to deal with render contexts for floating elements like Modals.
2 |
3 | Solid has a `` component whose child content will be inserted at the location of your choosing. By default, its elements will be rendered in a `
` in the `document.body`.
4 |
5 | In the example, we see our information popup get cut off. We can solve this by pulling it out of the flow by wrapping the element in a ``:
6 |
7 | ```jsx
8 |
9 |
\n \n );\n}\n\nrender(() => , document.getElementById(\"app\"));\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_switch/lesson.md:
--------------------------------------------------------------------------------
1 | Sometimes you need to deal with conditionals with more than 2 mutual exclusive outcomes. For this case, we have the `` and `` components modeled roughly after JavaScript's `switch`/`case`.
2 |
3 | It will try in order to match each condition, stopping to render the first that evaluates to true. Failing all of them, it will render the fallback.
4 |
5 | In the example, we can replace our nested `` components with this:
6 |
7 | ```jsx
8 | {x()} is between 5 and 10}>
9 | 10}>
10 |
{x()} is greater than 10
11 |
12 | x()}>
13 |
{x()} is less than 5
14 |
15 |
16 | ```
17 |
--------------------------------------------------------------------------------
/langs/en/tutorials/flow_switch/solved.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal, Switch, Match } from \"solid-js\";\n\nfunction App() {\n const [x] = createSignal(7);\n\n return (\n {x()} is between 5 and 10}>\n 10} >\n
\n );\n}\n\nrender(() => , document.getElementById('app'))\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/id/tutorials/flow_portal/lesson.md:
--------------------------------------------------------------------------------
1 | Ini akan berguna untuk menyisipkan elemen di luar alur normal aplikasi. z-index terkadang tidak cukup untuk menangani konteks render untuk elemen mengambang seperti Modals.
2 |
3 | Solid memiliki komponen `` yang konten turunannya akan disisipkan di lokasi yang kamu pilih. Secara default, elemennya akan dirender dalam `
` di `document.body`.
4 |
5 | Dalam contoh ini, ada popup informasi yang terpotong. Kita dapat mengatasi ini dengan menariknya keluar dari alur dengan membungkus elemen dalam ``:
6 |
7 | ```jsx
8 |
9 |
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | },
7 | {
8 | "name": "style",
9 | "type": "css",
10 | "content": "div { width: 100%; height: 100%; }"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/langs/it/tutorials/bindings_spreads/lesson.md:
--------------------------------------------------------------------------------
1 | Sometimes your components and elements accept a variable number of attributes and it makes sense to pass them down as an object instead of individually. This is especially true when wrapping a DOM element in a component, a common practice when making design systems.
2 |
3 | For this we use the spread operator `...`.
4 |
5 | We can pass an object with a variable number of properties:
6 |
7 | ```jsx
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/it/tutorials/bindings_style/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n const [num, setNum] = createSignal(0);\n setInterval(() => setNum((num() + 1) % 255), 30)\n\n return
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_dynamic/lesson.md:
--------------------------------------------------------------------------------
1 | The `` tag is useful when you render from data. It lets you pass either a string for a native element or a component function and it will render that with the rest of the provided props.
2 |
3 | This is often more compact than writing a number of `` or `` components.
4 |
5 | In the example, we can replace the `` statement:
6 |
7 | ```jsx
8 | }>
9 |
10 |
11 |
12 | ```
13 |
14 | with:
15 |
16 | ```jsx
17 |
18 | ```
19 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_error_boundary/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { ErrorBoundary } from \"solid-js\";\n\nconst Broken = (props) => {\n throw new Error(\"Oh No\");\n return <>Never Getting Here\n}\n\nfunction App() {\n return (\n <>\n
Before
\n \n
After
\n \n );\n}\n\nrender(() => , document.getElementById(\"app\"));\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_error_boundary/lesson.md:
--------------------------------------------------------------------------------
1 | A JavaScript error originating in the UI shouldn’t break the whole app. Error boundaries are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
2 |
3 | A component has crashed our example. Let's wrap it in an Error Boundary that displays the error.
4 |
5 | ```jsx
6 | err}>
7 |
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_error_boundary/solved.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { ErrorBoundary } from \"solid-js\";\n\nconst Broken = (props) => {\n throw new Error(\"Oh No\");\n return <>Never Getting Here\n}\n\nfunction App() {\n return (\n <>\n
\n );\n}\n\nrender(() => , document.getElementById('app'))\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_portal/lesson.md:
--------------------------------------------------------------------------------
1 | Sometimes it's beneficial to insert elements outside the normal flow of the app. Z-indexes are sometimes insufficient to deal with render contexts for floating elements like Modals.
2 |
3 | Solid has a `` component whose child content will be inserted at the location of your choosing. By default, its elements will be rendered in a `
` in the `document.body`.
4 |
5 | In the example, we see our information popup get cut off. We can solve this by pulling it out of the flow by wrapping the element in a ``:
6 |
7 | ```jsx
8 |
9 |
\n \n );\n}\n\nrender(() => , document.getElementById(\"app\"));\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_switch/lesson.md:
--------------------------------------------------------------------------------
1 | Sometimes you need to deal with conditionals with more than 2 mutual exclusive outcomes. For this case, we have the `` and `` components modeled roughly after JavaScript's `switch`/`case`.
2 |
3 | It will try in order to match each condition, stopping to render the first that evaluates to true. Failing all of them, it will render the fallback.
4 |
5 | In the example, we can replace our nested `` components with this:
6 |
7 | ```jsx
8 | {x()} is between 5 and 10}>
9 | 10}>
10 |
{x()} is greater than 10
11 |
12 | x()}>
13 |
{x()} is less than 5
14 |
15 |
16 | ```
17 |
--------------------------------------------------------------------------------
/langs/it/tutorials/flow_switch/solved.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal, Switch, Match } from \"solid-js\";\n\nfunction App() {\n const [x] = createSignal(7);\n\n return (\n {x()} is between 5 and 10}>\n 10} >\n
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | },
7 | {
8 | "name": "style",
9 | "type": "css",
10 | "content": "div { width: 100%; height: 100%; }"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/bindings_forward_refs/lesson.md:
--------------------------------------------------------------------------------
1 | 컴포넌트 내부의 ref를 부모에게 노출하고 싶은 경우가 많이 있는데, Solid에서는 `ref` 속성을 사용합니다.
2 | 외부에서 컴포넌트에 `ref`를 사용하는 것은 네이티브 엘리먼트에서 `ref`를 사용하는 것과 매우 유사하게 작동하는데, 할당할 변수나 콜백 함수를 전달할 수 있습니다.
3 |
4 | 하지만, 컴포넌트 작성자는 해당 `ref`를 내부 엘리먼트에 연결하여 다시 전달해야 하며, ref 전달을 위해 `props.ref`를 활용할 수 있습니다.
5 | `ref`의 타입이 제공되는 경우 콜백 형식이지만, 대부분의 경우 해당 컴포넌트의 JSX에 있는 엘리먼트나 컴포넌트의 `ref` 속성에 직접 할당할 가능성이 높기 떄문에, 이러한 세부 정보는 대부분 숨겨져 있습니다.
6 |
7 | 로고에 애니메이션을 다시 적용하려면, ref를 `canvas.tsx`에 전달해야 합니다:
8 |
9 | ```jsx
10 |
11 | ```
12 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/bindings_spreads/lesson.md:
--------------------------------------------------------------------------------
1 | 때로는 컴포넌트와 엘리먼트에서 다수의 속성을 받아서 아래쪽으로 전달할 때 하나씩 전달하기보다 객체로 전달하는 것이 합리적입니다.
2 | 디자인 시스템을 만들 때 일반적인 관행인 컴포넌트 안에 DOM 엘리먼트를 래핑할 때 특히 그렇습니다.
3 |
4 | 이런 경우 스프레드 연산자(`...`)를 사용합니다.
5 |
6 | 이렇게 하면 다수의 속성을 객체로 전달할 수 있습니다:
7 |
8 | ```jsx
9 |
10 | ```
11 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/bindings_style/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n const [num, setNum] = createSignal(0);\n setInterval(() => setNum((num() + 1) % 255), 30)\n\n return
Some Text
;\n}\n\nrender(() => , document.getElementById('app'));"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/bindings_style/lesson.md:
--------------------------------------------------------------------------------
1 | Solid의 `style` 속성은 스타일 문자열이나 객체를 받습니다.
2 | 객체는 `Element.prototype.style`과는 다르며, `style.setProperty`를 호출하기 위한 래퍼입니다.
3 | 이는 "backgroundColor"가 아닌 "background-color"와 같은 dash-case 형식을 받아들이며, 단위를 반드시 지정해야 합니다. 예를 들면, `width: 500` 대신 `width: 500px`를 사용해야 합니다.
4 |
5 | 또한 CSS 변수를 설정할 수도 있습니다:
6 |
7 | ```js
8 |
9 | ```
10 |
11 | 인라인 스타일을 사용해 div에 애니메이션을 추가해보겠습니다:
12 | ```jsx
13 |
\n );\n}\n\nrender(() => , document.getElementById('app'))\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/flow_portal/lesson.md:
--------------------------------------------------------------------------------
1 | 때로는 앱의 정상적인 플로우 외부에 엘리먼트를 삽입하는 것이 더 좋은 경우가 있습니다. Z-index 는 때때로 모달과 같은 플로팅 엘리먼트에 대한 렌더링 컨텍스트를 처리하기에 부족한 경우가 있습니다.
2 |
3 | Solid 에는 선택한 위치에 자식 콘텐츠가 삽입되는 `` 컴포넌트가 있습니다. 기본적으로 해당 엘리먼트는 `document.body`의 `
`에 렌더링됩니다.
4 |
5 | 이 예제에서, 팝업창이 잘리는 것을 볼 수 있습니다. 엘리먼트를 ``로 래핑하여 플로우에서 뺴내어 이 문제를 해결할 수 있습니다:
6 |
7 | ```jsx
8 |
9 |
\n \n );\n}\n\nrender(() => , document.getElementById(\"app\"));\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/flow_switch/lesson.md:
--------------------------------------------------------------------------------
1 | 때로는 2개 이상의 상호 배타적 결과가 있는 조건문을 처리해야 합니다. 이런 경우를 위해 자바스크립트의 `switch`/`case`를 본떠 만든 ``, `` 컴포넌트가 있습니다.
2 |
3 | 각 조건을 비교해서 조건식이 true인 첫 번째 항목을 렌더링하며, 모두 매칭되지 않을 경우 fallback을 렌더링합니다.
4 |
5 | 이 예제에서 중첩된 `` 컴포넌트를 다음과 같이 바꿀 수 있습니다:
6 |
7 | ```jsx
8 | {x()} is between 5 and 10}>
9 | 10}>
10 |
{x()} is greater than 10
11 |
12 | x()}>
13 |
{x()} is less than 5
14 |
15 |
16 | ```
17 |
--------------------------------------------------------------------------------
/langs/ko-kr/tutorials/flow_switch/solved.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal, Switch, Match } from \"solid-js\";\n\nfunction App() {\n const [x] = createSignal(7);\n\n return (\n {x()} is between 5 and 10}>\n 10} >\n
\n );\n}\n\nrender(() => , document.getElementById('app'));"
6 | },
7 | {
8 | "name": "style",
9 | "type": "css",
10 | "content": "div { width: 100%; height: 100%; }"
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/langs/ru/tutorials/bindings_spreads/lesson.md:
--------------------------------------------------------------------------------
1 | Иногда наши компоненты и элементы получают несколько атрибутов и в таком случае имеет смысл оформить их в виде объекта, а не передавать по одному. Это довольно частый когда мы оборачиваем DOM элемент в компонент, например, при создании систем дизайна.
2 |
3 | Когда нам это необходимо мы можем использовать оператор расширения `...` (`spread operator`).
4 |
5 | Таким образом мы можем удобно передавать несколько атрибутов:
6 |
7 | ```jsx
8 |
9 | ```
10 |
--------------------------------------------------------------------------------
/langs/ru/tutorials/bindings_style/lesson.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | {
4 | "name": "main",
5 | "content": "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n const [num, setNum] = createSignal(0);\n setInterval(() => setNum((num() + 1) % 255), 30)\n\n return
Some Text
;\n}\n\nrender(() => , document.getElementById('app'));"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/ru/tutorials/bindings_style/lesson.md:
--------------------------------------------------------------------------------
1 | Атрибут `style` в Solid принимает в себя строки и объекты. Однако объект отличается от `Element.prototype.style` и вместо этого мы используем его как обертку для вызова `style.setProperty`. Это значит, что ключи принимают форму через-дефис (`dash-case`), например `backgroundColor` становится `background-color`. Такая форма позволяет нам использовать CSS переменные:
2 |
3 | ```js
4 |
5 | ```
6 |
7 | Давайте анимируем наш div с помощью нескольких инлайн (`inline`) стилей:
8 |
9 | ```jsx
10 |
\n );\n}\n\nrender(() => , document.getElementById('app'))\n"
6 | }
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/langs/ru/tutorials/flow_portal/lesson.md:
--------------------------------------------------------------------------------
1 | В вашем приложении может возникнуть необходимость отрендерить элементы вне обычного потока приложения. Не все проблемы с модальными окнами могут быть решены с помощью Z-индексов.
2 |
3 | Специально для решения таких задач в Solid есть компонент , дочерний контент которого будет вставлен в выбранном вами месте. По умолчанию его элементы будут отображаться в
встроенным в `document.body`.
4 |
5 | В этом примере мы видим, что наше всплывающее окно плохо видно. Мы можем решить эту проблему, использовав `:
6 |
7 | ```jsx
8 |
9 |