Allow to change the Localized/Overlay element type

[macabeus]

Currently, <Overlay> outputs a <span> wrapping the result:

<Overlay id="foo">

outputs something like:

<span>foo text</span>

But we may need to render a specific element, such as <p>.

Perhaps we can use <svelte:element> and let the user decides which element is better for the use case, defaulting to <p> if no one is defined.

The same can be useful for <Localized>.
Currently, it doesn't have a wrapper element. Then, if we need to wrap it, we need to write more:

<Localized id="foo" let:text>
  <p>{text}</p>
</Localized>

If would be good if we could have an API like this:

<Localized id="foo" element="p" />

[sfriedel]

@macabeus <Overlay> outputting an additional wrapper element is a technical necessity that I'd very much like to eliminate in the long run. It should currently be considered an implementation detail. I'd recommend against relying on the container for styling purposes.
The next release will actually change that container to a <div> with display: contents similar to the wrappers that svelte injects for setting css variables when using the <Component --some-css-var="value"> syntax.

<Localized> does not add any additional wrappers to make it usable in situations where the additional element would be detrimental. You could always have your own component that wraps <Localized> with an additional wrapper using <svelte:element> or similar if that is something that you often need.