3.5: custom elements

.vitepress/config.ts

@@ -422,6 +422,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
     {
       text: 'Pokročilá API',
       items: [
+        { text: 'Custom elementy', link: '/api/custom-elements' },
         { text: 'API funkce pro vykreslení', link: '/api/render-function' },
         { text: 'API pro vykreslování na serveru', link: '/api/ssr' },
         { text: 'TypeScript utility typy', link: '/api/utility-types' },

src/api/custom-elements.md

@@ -0,0 +1,56 @@
+# Custom elements API {#custom-elements-api}
+
+## defineCustomElement() {#definecustomelement}
+
+Tato metoda přijímá stejný parametr jako [`defineComponent`](#definecomponent), ale místo toho vrací konstruktor nativního [custom elementu](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
+
+- **Typ**
+
+  ```ts
+  function defineCustomElement(
+    component:
+      | (ComponentOptions & { styles?: string[] })
+      | ComponentOptions['setup']
+  ): {
+    new (props?: object): HTMLElement
+  }
+  ```
+
+  > Typ je pro lepší čitelnost zjednodušen.
+
+- **Podrobnosti**
+
+  Kromě běžných vlastnstí komponenty podporuje `defineCustomElement()` také speciální vlastností `styles`, která by měla být polem vložených CSS řetězců, které poskytují CSS, které by mělo být vloženo do stínového root elementu.
+
+  Návratovou hodnotou je konstruktor custom elementu, který lze zaregistrovat pomocí [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
+
+- **Příklad**
+
+  ```js
+  import { defineCustomElement } from 'vue'
+
+  const MyVueElement = defineCustomElement({
+    /* vlastnosti komponenty */
+  })
+
+  // Zaregistruje custom element.
+  customElements.define('my-vue-element', MyVueElement)
+  ```
+
+- **Viz také:**
+
+  - [Průvodce - Vytváření custom elementů s Vue](/guide/extras/web-components#building-custom-elements-with-vue)
+
+  - Také si všimněte, že `defineCustomElement()` vyžaduje [speciální konfiguraci](/guide/extras/web-components#sfc-as-custom-element), pokud se používá se Single-File komponentami (SFC).
+
+## useHost() <sup class="vt-badge" data-text="3.5+"/> {#usehost}
+
+Pomocná funkce Composition API, která vrací hostitelský element aktuálního Vue custom elementu.
+
+## useShadowRoot() <sup class="vt-badge" data-text="3.5+"/> {#useshadowroot}
+
+Pomocná funkce Composition API, která vrací shadow root aktuálního Vue custom elementu.
+
+## this.$host <sup class="vt-badge" data-text="3.5+"/> {#this-host}
+
+Vlastnost Options API, která vystavuje hostitelský element aktuálního Vue custom elementu.

src/api/general.md

@@ -225,47 +225,4 @@ Definuje asynchronní komponentu, která se načítá „lazy“ až při jejím
   }
   ```
 
-- **Viz také:** [Průvodce - Asynchronní komponenty](/guide/components/async)
-
-## defineCustomElement() {#definecustomelement}
-
-Tato metoda přijímá stejný parametr jako [`defineComponent`](#definecomponent), ale místo toho vrací konstruktor nativního [custom elementu](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
-
-- **Typ**
-
-  ```ts
-  function defineCustomElement(
-    component:
-      | (ComponentOptions & { styles?: string[] })
-      | ComponentOptions['setup']
-  ): {
-    new (props?: object): HTMLElement
-  }
-  ```
-
-  > Typ je pro lepší čitelnost zjednodušen.
-
-- **Podrobnosti**
-
-  Kromě běžných vlastnstí komponenty podporuje `defineCustomElement()` také speciální vlastností `styles`, která by měla být polem vložených CSS řetězců, které poskytují CSS, které by mělo být vloženo do stínového root elementu.
-
-  Návratovou hodnotou je konstruktor custom elementu, který lze zaregistrovat pomocí [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
-
-- **Příklad**
-
-  ```js
-  import { defineCustomElement } from 'vue'
-
-  const MyVueElement = defineCustomElement({
-    /* vlastnosti komponenty */
-  })
-
-  // Zaregistruje custom element.
-  customElements.define('my-vue-element', MyVueElement)
-  ```
-
-- **Viz také:**
-
-  - [Průvodce - Vytváření custom elementů s Vue](/guide/extras/web-components#building-custom-elements-with-vue)
-
-  - Také si všimněte, že `defineCustomElement()` vyžaduje [speciální konfiguraci](/guide/extras/web-components#sfc-as-custom-element), pokud se používá se Single-File komponentami (SFC).
+- **Viz také:** [Průvodce - Asynchronní komponenty](/guide/components/async)

src/guide/extras/web-components.md

@@ -47,15 +47,15 @@ export default {
 ```js
 // vue.config.js
 module.exports = {
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     config.module
       .rule('vue')
       .use('vue-loader')
-      .tap(options => ({
+      .tap((options) => ({
         ...options,
         compilerOptions: {
           // považovat jakýkoli tag, který začíná na ion- jako custom element
-          isCustomElement: tag => tag.startsWith('ion-')
+          isCustomElement: (tag) => tag.startsWith('ion-')
         }
       }))
   }
@@ -81,7 +81,7 @@ Hlavní výhodou custom elementů je, že je lze použít s libovolným framewor
 
 ### defineCustomElement {#definecustomelement}
 
-Vue podporuje vytváření custom elementů pomocí přesně stejných API pro Vue komponenty pomocí metody [`defineCustomElement`](/api/general#definecustomelement). Metoda přijímá stejný parametr jako [`defineComponent`](/api/general#definecomponent), ale místo komponenty vrací konstruktor custom elementu, který rozšiřuje `HTMLElement`:
+Vue podporuje vytváření custom elementů pomocí přesně stejných API pro Vue komponenty pomocí metody [`defineCustomElement`](/api/custom-elements#definecustomelement). Metoda přijímá stejný parametr jako [`defineComponent`](/api/general#definecomponent), ale místo komponenty vrací konstruktor custom elementu, který rozšiřuje `HTMLElement`:
 
 ```vue-html
 <my-vue-element></my-vue-element>
@@ -171,6 +171,20 @@ Uvnitř komponenty lze sloty vykreslovat pomocí elementu `<slot/>` jako obvykle
 
 [Provide / Inject API](/guide/components/provide-inject#provide-inject) a jeho [ekvivalent v Composition API](/api/composition-api-dependency-injection#provide) fungují i mezi Vue-definovanými custom elementy. Nicméně, mějte na paměti, že to funguje **pouze mezi custom elementy**. tj. Vue-definovaný custom element nebude schopen vložit vlastnosti poskytované Vue komponentou, která není custom element.
 
+#### Globální konfigurace <sup class="vt-badge" data-text="3.5+" /> {#app-level-config}
+
+Pomocí volby `configureApp` můžete pro Vue custom element nastavit instanci aplikace:
+
+```js
+defineCustomElement(MyComponent, {
+  configureApp(app) {
+    app.config.errorHandler = (err) => {
+      /* ... */
+    }
+  }
+})
+```
+
 ### SFC jako custom element {#sfc-as-custom-element}
 
 Metoda `defineCustomElement` funguje i s Vue Single-File komponentami (SFC). Nicméně, s výchozím nastavením nástrojů bude `<style>` uvnitř SFC během produkčního buildu stále extrahován a sloučen do jednoho CSS souboru. Při použití SFC jako custom elementu je často žádoucí vložit `<style>` tagy do shadow root custom elementu.
@@ -242,7 +256,7 @@ export const Counter = defineCustomElement(CounterSFC)
 // zaregistrovat globální typy
 declare module 'vue' {
   export interface GlobalComponents {
-    'Counter': typeof Counter,
+    Counter: typeof Counter
   }
 }
 ```