Svelte Html

jill64
1

🏷️ Declarative attribute binding for the root html element

#svelte #attributes #declarative #html

Want a Svelte site built?

Hire a Svelte developer

Demo Download

@jill64/svelte-html

🏷️ Declarative attribute binding for the root html element

Demo

Installation

npm i @jill64/svelte-html

Usage

By passing a key-value set to the <SvelteHTML /> component, attributes are bind to the root html element.

<script>
  import { SvelteHTML } from '@jill64/svelte-html'
</script>

<SvelteHTML lang="en" prefix="example" />

↓

<html lang="en" prefix="example">
  <!-- ... -->
</html>

SSR

Attribute binding with <SvelteHTML> is only applied on the client. To assign arbitrary attributes during SSR, use the apply function in the handle hook.

// hooks.server.js
import { apply } from '@jill64/svelte-html'

export const handle = async ({ event, resolve }) => {
  // ...
  return resolve(event, {
    transformPageChunk: apply({
      lang: 'en',
      prefix: 'example'
    })
  })
}

License

MIT

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Want a Svelte site built?

Hire a Svelte developer