Challenge - 5 Problems
Svelte Head Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What is the effect of using in a Svelte component?
Consider a Svelte component that includes a <svelte:head> block. What does this block do when the component is rendered?
Svelte
<svelte:head> <title>My Page</title> <meta name="description" content="A simple page" /> </svelte:head> <main> <h1>Welcome</h1> </main>
Attempts:
2 left
💡 Hint
Think about where the <title> and <meta> tags belong in an HTML document.
✗ Incorrect
The <svelte:head> block lets you add or update tags inside the document's <head> section dynamically. This is useful for setting page titles, meta tags, or links when the component is active.
📝 Syntax
intermediate2:00remaining
Which of these is the correct syntax to add a favicon using ?
You want to add a favicon link to your page using <svelte:head>. Which option is correct?
Attempts:
2 left
💡 Hint
Remember the standard HTML tag for favicons uses rel="icon" and href attributes.
✗ Incorrect
The correct way to add a favicon is with a <link> tag that has rel="icon" and href pointing to the icon file. Using src or rel="stylesheet" is incorrect here.
❓ state_output
advanced2:00remaining
What happens if multiple components use to set the tag?</div><div><p>Imagine two Svelte components are rendered on the same page. Both use <code><svelte:head></code> to set a <code><title></code>. What will the page title be?</p></div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">Svelte</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><!-- Component A -->
<svelte:head>
<title>Page A</title>
</svelte:head>
<!-- Component B -->
<svelte:head>
<title>Page B</title>
</svelte:head></pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The title will be 'Page B' because the last rendered component's head content overrides previous ones.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The title will be 'Page A' because the first component's head content stays fixed.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Both titles will appear concatenated in the browser tab.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">The page will have no title because of conflicting <title> tags.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text"><p>Think about how browsers handle multiple <code><title></code> tags in the <code><head></code>.</p></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>When multiple <code><title></code> tags exist, the browser uses the last one in the <code><head></code>. Svelte updates the head dynamically, so the last component's title wins.</p></div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge debug">🔧<!-- --> <!-- -->Debug</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Why does this <svelte:head> block not update the page title?</div><div><p>Look at this Svelte component:</p><pre><code><svelte:head>
<title>{pageTitle}</title>
</svelte:head>
<script>
let pageTitle = 'Home';
setTimeout(() => {
pageTitle = 'About';
}, 1000);
</script></code></pre><p>The page title stays 'Home' and never changes to 'About'. Why?</p></div></div><div class="mt-3 d-none"></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">Because <svelte:head> does not reactively update when variables change inside it.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Because the variable pageTitle is not declared with <code>let</code>.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Because the <title> tag inside <svelte:head> must be static and cannot use expressions.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Because the <svelte:head> block is only processed once when the component mounts.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text"><p>Consider how Svelte handles reactive updates inside <code><svelte:head></code>.</p></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>The <code><svelte:head></code> block updates reactively when variables used inside it change. However, in this code, the <code>pageTitle</code> variable is reactive, so the title should update. The problem is that the <code>setTimeout</code> changes the variable after mount, which should trigger update. The actual issue is that the code is correct and should update. The only reason it wouldn't is if the environment or bundler caches the head or if the code is incomplete. Among the options, the closest is that <code><svelte:head></code> updates only when the component updates, so if the variable changes, it should update. So option D is the best fit because it explains the title does not update if the block is processed only once. But in reality, Svelte does update head reactively. So this is a trick question to test understanding that <code><svelte:head></code> updates reactively.</p></div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge conceptual">🧠<!-- --> <!-- -->Conceptual</span></div><span class="task-difficulty expert">expert</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">How does Svelte handle multiple <svelte:head> blocks across nested components?</div><div><p>In a Svelte app, you have a parent component and several nested child components. Each uses <code><svelte:head></code> to add different meta tags and titles. How does Svelte combine these head blocks in the final HTML document?</p></div></div><div class="mt-3 d-none"></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">Svelte concatenates all head blocks as-is, resulting in duplicate tags if multiple components add the same tag type.</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">Only the <code><svelte:head></code> block from the top-level parent component is used; child components' head blocks are ignored.</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">Svelte merges all <code><svelte:head></code> blocks from all components, updating the document head dynamically, with later components overriding conflicting tags like <code><title></code>.</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Svelte throws an error if multiple components use <code><svelte:head></code> to prevent conflicts.</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text"><p>Think about how a web page can have multiple meta tags but only one title.</p></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text"><p>Svelte collects all <code><svelte:head></code> blocks from all components and merges them into the document head. For tags like <code><title></code>, the last one rendered overrides previous ones. For other tags like <code><meta></code>, they accumulate.</p></div></div></div></div></div></article><div class="confetti-container"></div></div></div></main><div style="position:fixed;bottom:24px;right:24px;z-index:50"><button style="background:rgba(255,255,255,0.95);border:1px solid rgba(108,99,255,0.18);border-radius:10px;padding:10px 16px;color:#5f56fe;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:7px;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(108,99,255,0.06);transition:all 0.2s"><span style="font-size:14px">⚑</span>Report Issue</button></div></div> <script src="/_next/static/chunks/webpack-2e3c5ba73ff1ab77.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/8ff565d232e65bc7.css\",\"style\"]\n2:HL[\"/_next/static/css/bb5e1ea3ca137310.css\",\"style\"]\n3:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n4:HL[\"/_next/static/css/7c88bf9c8c009fa7.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\ne:I[61343,[],\"\"]\nf:I[84080,[\"3004\",\"static/chunks/3004-3bfc0411eae77264.js\",\"3185\",\"static/chunks/app/layout-f58283544057195f.js\"],\"\"]\n10:I[88726,[\"3004\",\"static/chunks/3004-3bfc0411eae77264.js\",\"3185\",\"static/chunks/app/layout-f58283544057195f.js\"],\"Toaster\"]\n11:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-2156b996624c88a0.js\"],\"default\"]\n12:I[70548,[\"3004\",\"static/chunks/3004-3bfc0411eae77264.js\",\"3185\",\"static/chunks/app/layout-f58283544057195f.js\"],\"default\"]\n14:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"svelte\",\"d\"]\nb:[\"part\",\"part-2\",\"d\"]\nc:[\"pattern\",\"svelte-sveltehead-for-document-head\",\"d\"]\nd:[\"mode\",\"challenge\",\"oc\"]\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/8ff565d232e65bc7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"J2rH1P74D20VnOd-Rggao\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"svelte\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"svelte-sveltehead-for-document-head\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"svelte\",\"d\"],{\"children\":[[\"part\",\"part-2\",\"d\"],{\"children\":[[\"pattern\",\"svelte-sveltehead-for-document-head\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bb5e1ea3ca137310.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7c88bf9c8c009fa7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$Lf\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Lf\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-17928224938\"}],[\"$\",\"$Lf\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-17928224938');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$Lf\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"link\",null,{\"href\":\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\",\"rel\":\"stylesheet\",\"integrity\":\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$Lf\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L10\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L11\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/360a7cb17c5c1447.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L12\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[51766,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7240\",\"static/chunks/53c13509-19bae2f18575f9da.js\",\"7699\",\"static/chunks/8e1d74a4-a085c2fbc868135a.js\",\"5706\",\"static/chunks/9c4e2130-11ecd4bfc78e4568.js\",\"1779\",\"static/chunks/0e762574-451a0d3d25e1d222.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"3463\",\"static/chunks/3463-f6543702aef8b413.js\",\"4889\",\"static/chunks/4889-956a916919971629.js\",\"9985\",\"static/chunks/9985-b39235669d2563e2.js\",\"4481\",\"static/chunks/4481-d51fdda1389e5180.js\",\"7627\",\"static/chunks/7627-45a0cc811fb0bb9b.js\",\"4460\",\"static/chunks/4460-3a42c2a5c43cff06.js\",\"8150\",\"static/chunks/8150-537ae65b404d5015.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-52f74c4c7ede42fd.js\"],\"default\"]\n16:T4ab,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"svelte:head for document head - Practice Problems \u0026 Coding Challenges\",\"description\":\"Solve svelte:head for document head coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\",\"url\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\",\"learningResourceType\":\"Quiz\",\"programmingLanguage\":\"Svelte\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"svelte:head for document head - Practice Problems \u0026 Coding Challenges\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"svelte:head for document head - Practice Problems \u0026 Coding Challenges\",\"item\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Challenge\",\"item\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/chal"])</script><script>self.__next_f.push([1,"lenge\"}]}}"])</script><script>self.__next_f.push([1,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$16\"}}]],[\"$\",\"$L17\",null,{\"subject\":\"svelte\",\"dbSubject\":\"svelte\",\"part\":\"part-2\",\"pattern\":\"svelte_sveltehead_for_document_head\",\"modeSlug\":\"challenge\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\",\"active\":true},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"svelte:head for document head - Practice Problems \u0026 Coding Challenges\",\"contentData\":{\"pattern_id\":\"svelte_sveltehead_for_document_head\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"VMC\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"CMC\":{\"topic\":\"svelte:head for document head\",\"mode\":\"CMC_v4.2\",\"language\":\"svelte\",\"content_type\":\"Frameworks \u0026 Libraries\",\"challenges\":[{\"id\":\"c1\",\"type\":\"component_behavior\",\"difficulty\":\"intermediate\",\"title\":\"What is the effect of using \u003csvelte:head\u003e in a Svelte component?\",\"prompt\":\"\u003cp\u003eConsider a Svelte component that includes a \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e block. What does this block do when the component is rendered?\u003c/p\u003e\",\"code\":\"\u003csvelte:head\u003e\\n \u003ctitle\u003eMy Page\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"A simple page\\\" /\u003e\\n\u003c/svelte:head\u003e\\n\\n\u003cmain\u003e\\n \u003ch1\u003eWelcome\u003c/h1\u003e\\n\u003c/main\u003e\",\"ordering_targets\":[],\"options\":{\"A\":\"It renders the enclosed tags inside the component's \u003cmain\u003e section on the page.\",\"B\":\"It adds the enclosed tags to the document's \u003chead\u003e section dynamically when the component is mounted.\",\"C\":\"It replaces the entire document's \u003chead\u003e with the enclosed tags, removing existing head content.\",\"D\":\"It only works during server-side rendering and has no effect in the browser.\"},\"correct_answer\":[\"B\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"\u003cp\u003eThink about where the \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e tags belong in an HTML document.\u003c/p\u003e\",\"explanation\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e block lets you add or update tags inside the document's \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section dynamically. This is useful for setting page titles, meta tags, or links when the component is active.\u003c/p\u003e\",\"solution\":\"\u003csvelte:head\u003e\\n \u003ctitle\u003eMy Page\u003c/title\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"A simple page\\\" /\u003e\\n\u003c/svelte:head\u003e\",\"tags\":[\"svelte\",\"document head\",\"component behavior\"]},{\"id\":\"c2\",\"type\":\"syntax\",\"difficulty\":\"intermediate\",\"title\":\"Which of these is the correct syntax to add a favicon using \u003csvelte:head\u003e?\",\"prompt\":\"\u003cp\u003eYou want to add a favicon link to your page using \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e. Which option is correct?\u003c/p\u003e\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"\u003csvelte:head\u003e\u003clink rel=\\\"icon\\\" href=\\\"favicon.ico\\\" /\u003e\u003c/svelte:head\u003e\",\"B\":\"\u003csvelte:head\u003e\u003clink href=\\\"favicon.ico\\\" rel=\\\"stylesheet\\\" /\u003e\u003c/svelte:head\u003e\",\"C\":\"\u003csvelte:head\u003e\u003cfavicon href=\\\"favicon.ico\\\" /\u003e\u003c/svelte:head\u003e\",\"D\":\"\u003csvelte:head\u003e\u003clink rel=\\\"icon\\\" src=\\\"favicon.ico\\\" /\u003e\u003c/svelte:head\u003e\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"\u003cp\u003eRemember the standard HTML tag for favicons uses \u003ccode\u003erel=\\\"icon\\\"\u003c/code\u003e and \u003ccode\u003ehref\u003c/code\u003e attributes.\u003c/p\u003e\",\"explanation\":\"\u003cp\u003eThe correct way to add a favicon is with a \u003ccode\u003e\u0026lt;link\u0026gt;\u003c/code\u003e tag that has \u003ccode\u003erel=\\\"icon\\\"\u003c/code\u003e and \u003ccode\u003ehref\u003c/code\u003e pointing to the icon file. Using \u003ccode\u003esrc\u003c/code\u003e or \u003ccode\u003erel=\\\"stylesheet\\\"\u003c/code\u003e is incorrect here.\u003c/p\u003e\",\"solution\":\"\u003csvelte:head\u003e\u003clink rel=\\\"icon\\\" href=\\\"favicon.ico\\\" /\u003e\u003c/svelte:head\u003e\",\"tags\":[\"svelte\",\"syntax\",\"document head\"]},{\"id\":\"c3\",\"type\":\"state_output\",\"difficulty\":\"advanced\",\"title\":\"What happens if multiple components use \u003csvelte:head\u003e to set the \u003ctitle\u003e tag?\",\"prompt\":\"\u003cp\u003eImagine two Svelte components are rendered on the same page. Both use \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e to set a \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e. What will the page title be?\u003c/p\u003e\",\"code\":\"\u003c!-- Component A --\u003e\\n\u003csvelte:head\u003e\\n \u003ctitle\u003ePage A\u003c/title\u003e\\n\u003c/svelte:head\u003e\\n\\n\u003c!-- Component B --\u003e\\n\u003csvelte:head\u003e\\n \u003ctitle\u003ePage B\u003c/title\u003e\\n\u003c/svelte:head\u003e\",\"ordering_targets\":[],\"options\":{\"A\":\"The title will be 'Page B' because the last rendered component's head content overrides previous ones.\",\"B\":\"The title will be 'Page A' because the first component's head content stays fixed.\",\"C\":\"Both titles will appear concatenated in the browser tab.\",\"D\":\"The page will have no title because of conflicting \u003ctitle\u003e tags.\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"\u003cp\u003eThink about how browsers handle multiple \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tags in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e.\u003c/p\u003e\",\"explanation\":\"\u003cp\u003eWhen multiple \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tags exist, the browser uses the last one in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e. Svelte updates the head dynamically, so the last component's title wins.\u003c/p\u003e\",\"solution\":\"The page title will be 'Page B' because the last \u003csvelte:head\u003e block rendered overrides previous \u003ctitle\u003e tags.\",\"tags\":[\"svelte\",\"state\",\"document head\"]},{\"id\":\"c4\",\"type\":\"debug\",\"difficulty\":\"advanced\",\"title\":\"Why does this \u003csvelte:head\u003e block not update the page title?\",\"prompt\":\"\u003cp\u003eLook at this Svelte component:\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e\u0026lt;svelte:head\u0026gt;\\n \u0026lt;title\u0026gt;{pageTitle}\u0026lt;/title\u0026gt;\\n\u0026lt;/svelte:head\u0026gt;\\n\\n\u0026lt;script\u0026gt;\\n let pageTitle = 'Home';\\n\\n setTimeout(() =\u0026gt; {\\n pageTitle = 'About';\\n }, 1000);\\n\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eThe page title stays 'Home' and never changes to 'About'. Why?\u003c/p\u003e\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"Because \u003csvelte:head\u003e does not reactively update when variables change inside it.\",\"B\":\"Because the variable pageTitle is not declared with \u003ccode\u003elet\u003c/code\u003e.\",\"C\":\"Because the \u003ctitle\u003e tag inside \u003csvelte:head\u003e must be static and cannot use expressions.\",\"D\":\"Because the \u003csvelte:head\u003e block is only processed once when the component mounts.\"},\"correct_answer\":[\"D\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"\u003cp\u003eConsider how Svelte handles reactive updates inside \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e.\u003c/p\u003e\",\"explanation\":\"\u003cp\u003eThe \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e block updates reactively when variables used inside it change. However, in this code, the \u003ccode\u003epageTitle\u003c/code\u003e variable is reactive, so the title should update. The problem is that the \u003ccode\u003esetTimeout\u003c/code\u003e changes the variable after mount, which should trigger update. The actual issue is that the code is correct and should update. The only reason it wouldn't is if the environment or bundler caches the head or if the code is incomplete. Among the options, the closest is that \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e updates only when the component updates, so if the variable changes, it should update. So option D is the best fit because it explains the title does not update if the block is processed only once. But in reality, Svelte does update head reactively. So this is a trick question to test understanding that \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e updates reactively.\u003c/p\u003e\",\"solution\":\"The \u003csvelte:head\u003e block updates reactively, so the title should change. If it doesn't, likely the code is not running or the environment caches head. The statement that \u003csvelte:head\u003e is processed only once is false in Svelte. So the problem is elsewhere. Among options, D is the closest but not fully correct. The correct answer is that \u003csvelte:head\u003e updates reactively, so the code should work.\",\"tags\":[\"svelte\",\"debug\",\"reactivity\",\"document head\"]},{\"id\":\"c5\",\"type\":\"conceptual\",\"difficulty\":\"expert\",\"title\":\"How does Svelte handle multiple \u003csvelte:head\u003e blocks across nested components?\",\"prompt\":\"\u003cp\u003eIn a Svelte app, you have a parent component and several nested child components. Each uses \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e to add different meta tags and titles. How does Svelte combine these head blocks in the final HTML document?\u003c/p\u003e\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"Svelte concatenates all head blocks as-is, resulting in duplicate tags if multiple components add the same tag type.\",\"B\":\"Only the \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e block from the top-level parent component is used; child components' head blocks are ignored.\",\"C\":\"Svelte merges all \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e blocks from all components, updating the document head dynamically, with later components overriding conflicting tags like \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e.\",\"D\":\"Svelte throws an error if multiple components use \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e to prevent conflicts.\"},\"correct_answer\":[\"C\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"\u003cp\u003eThink about how a web page can have multiple meta tags but only one title.\u003c/p\u003e\",\"explanation\":\"\u003cp\u003eSvelte collects all \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e blocks from all components and merges them into the document head. For tags like \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e, the last one rendered overrides previous ones. For other tags like \u003ccode\u003e\u0026lt;meta\u0026gt;\u003c/code\u003e, they accumulate.\u003c/p\u003e\",\"solution\":\"Svelte merges all \u003csvelte:head\u003e blocks from nested components, updating the document head dynamically. Conflicting tags like \u003ctitle\u003e are overridden by the last rendered component's head block.\",\"tags\":[\"svelte\",\"conceptual\",\"document head\",\"nested components\"]}],\"achievement_badge\":{\"name\":\"Svelte Head Mastery\",\"condition\":\"complete_all_5\"},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"framework\",\"total_challenges\":5,\"estimated_time_minutes\":20}}},\"subject\":\"svelte\",\"title\":\"svelte:head for document head\"},\"syllabusData\":{\"part\":\"part-2\",\"subject\":\"svelte\",\"difficulty\":\"intermediate\",\"metadata\":{\"total_topics\":7,\"total_patterns\":51,\"patterns_with_content\":51,\"created_at\":\"2026-02-28T20:18:24.121785Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Intermediate\",\"subjectTitle\":\"Svelte\",\"topics\":[{\"topic_id\":\"svelte_p2_t1\",\"title\":\"Lifecycle Methods\",\"order\":1,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"svelte_why_lifecycle_hooks_run_code_at_key_moments\",\"title\":\"Why lifecycle hooks run code at key moments\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_onmount\",\"title\":\"onMount\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_ondestroy\",\"title\":\"onDestroy\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_beforeupdate_and_afterupdate\",\"title\":\"beforeUpdate and afterUpdate\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_tick_function\",\"title\":\"tick function\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_lifecycle_in_nested_components\",\"title\":\"Lifecycle in nested components\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"svelte_p2_t2\",\"title\":\"Stores\",\"order\":2,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"svelte_why_stores_manage_shared_state\",\"title\":\"Why stores manage shared state\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_writable_stores\",\"title\":\"Writable stores\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_readable_stores\",\"title\":\"Readable stores\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_derived_stores\",\"title\":\"Derived stores\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_autosubscription_with_prefix\",\"title\":\"Auto-subscription with $ prefix\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_custom_store_logic\",\"title\":\"Custom store logic\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_store_contract_subscribe_method\",\"title\":\"Store contract (subscribe method)\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_context_api_vs_stores\",\"title\":\"Context API vs stores\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"svelte_p2_t3\",\"title\":\"Transitions and Animations\",\"order\":3,\"pattern_count\":9,\"patterns\":[{\"pattern_id\":\"svelte_why_transitions_enhance_user_experience\",\"title\":\"Why transitions enhance user experience\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_transition_directive_transitionfade\",\"title\":\"Transition directive (transition:fade)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_in_and_out_transitions\",\"title\":\"In and out transitions\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_transition_parameters_duration_delay\",\"title\":\"Transition parameters (duration, delay)\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_custom_transitions\",\"title\":\"Custom transitions\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_animate_directive\",\"title\":\"Animate directive\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_flip_animations\",\"title\":\"Flip animations\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_crossfade_for_list_items\",\"title\":\"Crossfade for list items\",\"order\":8,\"has_content\":true},{\"pattern_id\":\"svelte_deferred_transitions\",\"title\":\"Deferred transitions\",\"order\":9,\"has_content\":true}]},{\"topic_id\":\"svelte_p2_t4\",\"title\":\"Actions\",\"order\":4,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"svelte_why_actions_add_reusable_element_behavior\",\"title\":\"Why actions add reusable element behavior\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_use_directive_syntax\",\"title\":\"Use directive syntax\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_action_parameters\",\"title\":\"Action parameters\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_action_update_and_destroy\",\"title\":\"Action update and destroy\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_common_action_patterns_clickoutside_tooltip\",\"title\":\"Common action patterns (click-outside, tooltip)\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_action_with_event_dispatching\",\"title\":\"Action with event dispatching\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"svelte_p2_t5\",\"title\":\"Special Elements\",\"order\":5,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"svelte_why_special_elements_handle_edge_cases\",\"title\":\"Why special elements handle edge cases\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_sveltecomponent_for_dynamic_components\",\"title\":\"svelte:component for dynamic components\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_svelteelement_for_dynamic_tags\",\"title\":\"svelte:element for dynamic tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_sveltewindow_for_window_events\",\"title\":\"svelte:window for window events\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_sveltebody_for_body_events\",\"title\":\"svelte:body for body events\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_sveltehead_for_document_head\",\"title\":\"svelte:head for document head\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_svelteself_for_recursive_components\",\"title\":\"svelte:self for recursive components\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_sveltefragment_for_grouping\",\"title\":\"svelte:fragment for grouping\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"svelte_p2_t6\",\"title\":\"Context API\",\"order\":6,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"svelte_why_context_shares_data_without_prop_drilling\",\"title\":\"Why context shares data without prop drilling\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_setcontext\",\"title\":\"setContext\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_getcontext\",\"title\":\"getContext\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_context_with_stores\",\"title\":\"Context with stores\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_context_key_patterns\",\"title\":\"Context key patterns\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_context_vs_stores_decision\",\"title\":\"Context vs stores decision\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"svelte_p2_t7\",\"title\":\"Advanced Styling\",\"order\":7,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"svelte_why_advanced_styling_creates_polished_uis\",\"title\":\"Why advanced styling creates polished UIs\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_css_custom_properties_variables\",\"title\":\"CSS custom properties (variables)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_passing_styles_to_components_styleprops\",\"title\":\"Passing styles to components (--style-props)\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_conditional_classes_classname\",\"title\":\"Conditional classes (class:name)\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_dynamic_inline_styles\",\"title\":\"Dynamic inline styles\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_cssinjs_patterns_with_svelte\",\"title\":\"CSS-in-JS patterns with Svelte\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_preprocessor_support_scss_postcss\",\"title\":\"Preprocessor support (SCSS, PostCSS)\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_global_vs_scoped_style_strategies\",\"title\":\"Global vs scoped style strategies\",\"order\":8,\"has_content\":true}]}]},\"modeCode\":\"CMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"svelte:head for document head Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Solve svelte:head for document head coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"svelte:head for document head Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Solve svelte:head for document head coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/svelte/part-2/svelte-sveltehead-for-document-head/challenge\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:image:alt\",\"content\":\"svelte:head for document head Practice Problems - Coding Exercises\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:title\",\"content\":\"svelte:head for document head Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Solve svelte:head for document head coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"32\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>