TheOnlyWayUp/App.svelte

## README.md

      
    Raw
  

              README.md
            
          
    Description - The aim of this gist is to explain how one can modify attributes in their HTML (<html>) tag when working with a svelte project.
A common use-case for modifying the attributes of the <HTML> tag, is to change the lang attribute.
<html lang="en">
Or, in my case, I had to change the theme of the component library I was using (DaisyUI).
<html data-theme="business">
For example ^^
Svelte doesn't make this completely obvious, and it was hard trying to search for a solution due to the synonymity of HTML Tags (Leading to results about <p>, <h1>, ...) vs the <HTML> Tag. Which prompted me to make this gist, to help anyone else facing a similar issue.
In essence, you'll need to make slight modifications to your index.js and App.svelte files, which will be detailed in the below files.

If this helped you, a follow on My Github would be greatly appreciated :)

Resources


https://svelte.dev/tutorial/making-an-app - Displays how props can be used alongside the main App component in Svelte
https://stackoverflow.com/a/14593048/12107639 - How to grab the first <HTML> tag in JS
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute - Setting attributes for tags grabbed via JS


## App.svelte
<script>
    export let HTMLParent; <!-- Declares HTMLParent as a prop -->

    let DataTheme = "business";
    HTMLParent.setAttribute('data-theme', DataTheme) <!-- Sets the data-theme attribute on the HTML Tag to the value of DataTheme, leading to `<HTML data-theme="business">`.

</script>

<!--
  That's it, we've managed to grab and modify the top-level <HTML> Tag. You can make further modifications to it by accessing the HTMLParent variable
  - Reference for `HTMLParent` variable's methods - https://developer.mozilla.org/en-US/docs/Web/API/Element
-->

## index.js
import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    HTMLParent: document.getElementsByTagName("html")[0] // Passes the first found `<HTML>` tag as a prop to the App component
  }
});

export default app;
	<script>
	export let HTMLParent; <!-- Declares HTMLParent as a prop -->

	let DataTheme = "business";
	HTMLParent.setAttribute('data-theme', DataTheme) <!-- Sets the data-theme attribute on the HTML Tag to the value of DataTheme, leading to `<HTML data-theme="business">`.

	</script>

	<!--
	That's it, we've managed to grab and modify the top-level <HTML> Tag. You can make further modifications to it by accessing the HTMLParent variable
	- Reference for `HTMLParent` variable's methods - https://developer.mozilla.org/en-US/docs/Web/API/Element
	-->
	import App from "./App.svelte";

	const app = new App({
	target: document.body,
	props: {
	HTMLParent: document.getElementsByTagName("html")[0] // Passes the first found `<HTML>` tag as a prop to the App component
	}
	});

	export default app;