Estoy importando un componente Svelte3 de terceros con varios elementos secundarios. A modo de ejemplo, el componente de terceros tiene el siguiente aspecto:
<script> import Child1 from './third-party/Child1.svelte'; import Child2 from './third-party/Child2.svelte'; </script> <div> <Child1/> <Child2/> </div>¿Cuál sería la forma más limpia de ocultar uno de los componentes secundarios desde mi aplicación (o desde la consola de desarrollo) dado que:
En Vue, usaría la instancia raíz, pero ¿es esto posible en Svelte?
¡Muchos gracias!
Guido
No hay manera limpia. Jugar con el DOM desde fuera de un componente es una solución engañosa y puede generar resultados impredecibles.
Esta es una función que el tercero debe agregar a su API pública.
Una opción para el tercero es exponer la función a través de accesorios usando $set usando elcomponente api :
// App.svelte <script> import Child1 from './third-party/Child1.svelte'; import Child2 from './third-party/Child2.svelte'; export let child2Visible = true; </script> <div> <Child1/> {#if child2Visible} <Child2/> {/if} </div> // my-app.js import App from "./App.svelte"; window.app = new App({target}); // From dev console app.$set({ child2Visible: false })Otra forma para el tercero es exponer una forma de establecer un valor de almacenamiento que podría alternar parte de la interfaz de usuario.