Svelte Inject

A simple package to inject elements into other elements. Is so simple, that I can't call it a package really.

Usage

If you just want to inject something into the body of the document, you can just do the following.

<div use:inject>
	<!-- Anything really -->
</div>

<script>
import inject from "svelte-inject";
</script>

But! If you are extra adventurous, you can parse a CSS selection or a HTML node to inject it into that instead.

<div use:inject={"main"}>
	<!-- Anything really -->
</div>

<script>
import inject from "svelte-inject";
</script>

Note when using CSS preprocessors

When you use preprocessor, style might not be applied to the injected element. This is probable because it's scoped within another rule. A fix is to place the rules for the injected element at the root level. The following example won't work.

<div class="outer">
	<div class="inner" use:inject></div>
</div>

<style lang="scss">

.outer {
	// Styling
	
	.inner {
		// Styling
	}
}

</style>

To work around this, you can place the inner styling at the root like so:

<div class="outer">
	<div class="inner" use:inject></div>
</div>

<style lang="scss">

.outer {
	// Styling
}

.inner {
	// Styling
}

</style>