Hidden.svelte <script> let shown = false; export function show() { shown = true; } </script> {#if shown} <slot/> {/if} App.svelte <script> import Hidden from ‘./Hidden.svelte’; let child; </script> <Hidden bind:this={child}> Content </Hidden> <button on:click={() => child.show()}>Show</button> The call to child.show() can actually be simplified, but I thought this could make it harder to figure out … Read more
The trick here is to opt in to the cascade, using the :global(…) modifier. In your List component: <style> ul :global(a) { color: red; } </style> That means ‘any a elements that are children of this component’s ul element, whether they belong to this component or not, should be red’.
Any JavaScript statement (kind-of except function declarations) can be preceded by a label: foo: var x = 0; What you’ve got there is something like that: $: doubled = 6 * 2; In your statement, “$” is the label. There’s not much point to labelled statements because there’s no goto in JavaScript. Both break and … Read more
Use braces {} around your import Name // ..classes/formValidatorClass.js // Comment: => suggestion change your file name to similar your class name export class FormValidator { … } // some vue file with a form // import FormValidation from “..classes/formValidationClass” import { FormValidator as FormValidation} from “../classes/formValidatorClass”; // Comment: => use brackets around your import … Read more
I asked in Twitter, the answer from Svelte creator Rich Harris is: The most common way to handle that situation is $: c, console.log(‘yes’); It does feel a bit weird, I know 🙂
TL;DR Just wrap the handler function in another function. For elegancy, use the arrow function. You have to use a function declaration and then call the handler with arguments. The arrow function is elegant and is good for this scenario. Why do I need another function wrapper? If you would use just the handler and … Read more
Yep, you should be able to use URLSearchParams. In general, anything you can do in plain JS you can do in a Svelte script tag. <script> const urlParams = new URLSearchParams(window.location.search); const isBeta = urlParams.has(‘beta’); </script> {#if isBeta} <p>This is beta!</p> {:else} <p>This is not beta.</p> {/if} Edit: the above method will not work in … Read more
You need to pass props to the parent component with export let, then tie those props to class or style in the child component. You can either put a style tag on the element in the child you want to style dynamically and use a variable you export for the parent to determine the value … Read more
Put your images folder in public folder then reference like this: <img src=”https://stackoverflow.com/questions/56895865/images/background.jpg” alt=”background image” /> Or let src = “https://stackoverflow.com/questions/56895865/images/background.jpg”; . . . <img {src} alt=”background image” />
I had some trouble following Marvelous Walrus’s answer, so here’s a more explicit version of the same steps. Rollup is the bundler used by svelte. (You might know webpacker as a bundler). Step 1: Install the rollup css plugin: npm install -D rollup-plugin-css-only Step 2: edit rollup.config.js you need to import the plugin you just … Read more