Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding <body> CSS classes and <html> attributes #2336

Closed
miohtama opened this issue Aug 31, 2021 · 4 comments
Closed

Adding <body> CSS classes and <html> attributes #2336

miohtama opened this issue Aug 31, 2021 · 4 comments

Comments

@miohtama
Copy link

Describe the problem

Some CSS styling techniques and external JavaScript integrations require one to add classes on <body>.

I do not know if this is possible because the current%svelte.body% is wrapped within the <div> (at least on the starter template):

	<body>
		<div id="svelte">%svelte.body%</div>
	</body>

Another common feature is add attributes on <html> itself, like <html lang="fi">. This is especially important for SSR pages, as locale specific SEO optimisations are somewhat important.

I see this otpic been discussed in Svelte issue tracker before:

Describe the proposed solution

Because the SvelteKit has the concept of a page the issue could be solved on a page level, making the solution more straightforward than a generic Svelte solution.

Output could contain hooks allowing modifying both <html> and <body>.

I do not, however, know if Svelte internals has enough flexibility to allow this.

Alternatives considered

Solve this issue on Svelte level. However, it seems like there hasn't been any progress on this over two years.

Importance

nice to have

Additional Information

No response
@Mlocik97
Copy link
Contributor

Mlocik97 commented Sep 1, 2021 •
edited
Loading

I do not know if this is possible because

so You create issue about "BUG/feature" that You don't even know if exist in Svelte? Well, You know, this issue is already solved, because it works. The problem is only HTML attributes that are already covered by other issues and also RFC: sveltejs/rfcs#55

so this issue is totally useless.

Please create issues only when You check if bug really exist, or feature is really missing. And close this one.

This is just duplicate issue.

@benbender
Copy link

Just as a quicktip (apart from svelte): You have javascript on your hand. You have access to the document. Nothing in the world hinders you from just do something like document.getElementsByTagName("body")[0].classList.add("foo") or similar...

@PaulMaly
Copy link
Contributor

PaulMaly commented Sep 9, 2021

@benbender actually, SSR has hindered you from just use DOM API, because SvelteKit is also about isomorphic/universal applications, so we need to have the ways to do some things on both - client and server - sides universally.

@miohtama
Copy link
Author

miohtama commented Nov 25, 2021 •
edited
Loading

FYI there now exists svelte-body package.

I consider this issue closed with this addon package.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@miohtama @benbender @PaulMaly @Mlocik97