Svelte: Align closer to HTML

Created on 16 Mar 2020 · 4Comments · Source: sveltejs/svelte

Just want to say that I'm super impressed with svelte. I think you've nailed reactivity and proper component scoping.

I was wondering if you've considered pushing the concepts further and aligning closer to HTML? Instead of things like,

<svelte:window>
<svelte:head>

I'd love to be able to just use normal-ish HTML. Something like:

./document.svelte

<script>
  export let lang = 'en'
</script>

<html lang={lang}>
  <head>
    <title>cool</title>
    <meta name="test" content="ok" />
  </head>
  <body>
    <slot /> 
  </body>
</html>

./component.svelte

<script>
  import Document from './document'
  let a = 'hi world'
</script>

<Document lang="en">
  <div>{a}</div>
</Document>

I'd imagine one of the practical challenges with pushing the concept like this is separating ssr from dom, but since you have access to the compiler, I feel like this must be doable!

question

Source

matthewmueller

Most helpful comment

Okay! It sounds like I just need to spend more time with the language 🙂

Sorry if the opening issue wasn't clear, but my goal was exactly this:

In fact that's how I build a number of apps quite quickly, by taking a template from themeforest or similar and adding Svelte in.

Thanks for your quick response!

matthewmueller on 17 Mar 2020

👍2

All 4 comments

Having namespaced tags creates a clear separation in what is a "special" element and what isn't, so I'm not sure I see the advantage of creating a tag which almost looks like (confusingly so) a dom element.

As an addition - <svelte:window> is normal, perfectly valid html.

antony on 17 Mar 2020

True true. <svelte:window> is normal and valid XML.

I definitely don't have any answers here, but my goal would be to be able to take a regular HTML file, or say "view source" on this page, copy the HTML into a .svelte file and then that simply works. That's the baseline.

Then, when I'm ready, I can sprinkle in reactivity using svelte-specifics like {...}. It feels like a nicer progression to me, much in the same way that a PHP file can start as just HTML.

matthewmueller on 17 Mar 2020

@matthewmueller That already happens - Svelte is a superset of HTML, so you can take html from anywhere you like and then start adding reactivity. In fact that's how I build a number of apps quite quickly, by taking a template from themeforest or similar and adding Svelte in.

So what you're describing here is already the case.

However, this isn't what you conveyed in the initial issue, in fact it's sort of the reverse of that.

I'm going to close this issue - Since, I feel like any further ideas in this vein would better be seeded as discussion points in chat.

antony on 17 Mar 2020

👍2

Okay! It sounds like I just need to spend more time with the language 🙂

Sorry if the opening issue wasn't clear, but my goal was exactly this: