html icon indicating copy to clipboard operation
html copied to clipboard

Add src attribute to <template> to load a template from file

Open mildred opened this issue 1 year ago • 2 comments

What problem are you trying to solve?

I'm trying to include the content of another page like <iframe seamless> once did, in a purely declarative form with javascript disabled. it was dropped because shadow DOM was there but it does not fullfill everything yet.

What solutions exist today?

None exists with the shadow DOM without javascript.

It's possible to emulate the <iframe seamless> using javascript to fill a template element with HTML code fetched from an HTTP request. and put it in a shadow DOM.

How would you solve it?

Something like this should be possible:

<custom-element>
  <template shadowrootmode="open" src="included/file.html"></template>
</custom-element>

Anything else?

links should be resolved relative the the included file. Any href or src attribute should have its links made relative to the location of the included/file.html

mildred avatar Aug 20 '24 21:08 mildred

With

<template shadowrootmode="open" src="included/file.html"></template>

there is no need for <custom-element>. or reverse, with custom-element with src, there is no need for src on template level.

sashafirsov avatar Aug 21 '24 05:08 sashafirsov

No need for custom-element, you're right unless the enclosing element contains DOM nodes, in which case those nodes would be moved to the slot inside the template I believe. It get something like the iframe, you need an element in between to avoid swallowing those elements.

mildred avatar Aug 21 '24 18:08 mildred