Skip to content

Instantly share code, notes, and snippets.

@foolip
Last active January 16, 2026 15:24
Show Gist options
  • Select an option

  • Save foolip/6fe14bd712995c40db482e6587820cc6 to your computer and use it in GitHub Desktop.

Select an option

Save foolip/6fe14bd712995c40db482e6587820cc6 to your computer and use it in GitHub Desktop.
<!-- replace all (no markers) -->
<div contentname="container">
Loading...
</div>
<template contentfor="container">
<p>result 1</p>
<p>result 2</p>
</template>
<!-- insertion point (single marker) -->
<ul contentname="list">
<li>first item</li>
<!marker>
<li>last item</li>
</ul>
<template contentfor="list">
<li>middle item</li>
</template>
<!-- replace between (two markers) -->
<section contentname="section">
<header>header stuff</header>
<!marker>
Placeholder content
<!marker>
<footer>footer stuff</footer>
</section>
<template contentfor="section">
<p>Real content</p>
</template>
<!-- replace between (three markers) -->
<section contentname="section">
<header>header things</header>
<!marker>
Placeholder content
<!marker>
...
<!marker>
<footer>last thing</footer>
</section>
<template contentfor="section">
<p>Real content</p>
</template>
This would replace between the first and second marker and leave the last marker.
As an alternative, it could replace between the first and last marker, but that
would make more than two markers pointless and an authoring error.
<!-- replace then append multiple times -->
<div contentname="search-results">
Searching...
</div>
<template contentfor="search-results">
<p>One result</p>
<!marker>
</template>
<template contentfor="search-results">
<p>Another result</p>
<!marker>
</template>
<!-- what named markers could look like if added to this. an extra attribute would be needed on template -->
<div contentname="two-things">
<!marker name=one>
<hr>
<!marker name=two>
</div>
<template contentfor="two-things" marker=one>
<p>First thing</p>
</template>
<template contentfor="two-things" marker=two>
<p>Second thing</p>
</template>
<!-- anonymous markers but with for/sink/marker naming -->
<!-- replace all (no markers) -->
<div sink="container">
Loading...
</div>
<template for="container">
<p>result 1</p>
<p>result 2</p>
</template>
<!-- insertion point (single marker) -->
<ul sink="list">
<li>first item</li>
<!marker>
<li>last item</li>
</ul>
<template for="list">
<li>middle item</li>
</template>
<!-- replace between (two markers) -->
<section sink="section">
<header>header stuff</header>
<!marker>
Placeholder content
<!marker>
<footer>footer stuff</footer>
</section>
<template for="section">
<p>Real content</p>
</template>
<!-- replace between (three markers) -->
<section sink="section">
<header>header things</header>
<!marker>
Placeholder content
<!marker>
...
<!marker>
<footer>last thing</footer>
</section>
<template for="section">
<p>Real content</p>
</template>
This would replace between the first and second marker and leave the last marker.
As an alternative, it could replace between the first and last marker, but that
would make more than two markers pointless and an authoring error.
<!-- replace then append multiple times -->
<div sink="search-results">
Searching...
</div>
<template for="search-results">
<p>One result</p>
<!marker>
</template>
<template for="search-results">
<p>Another result</p>
<!marker>
</template>
<!-- what named markers could look like if added to this. an extra attribute would be needed on template -->
<div sink="two-things">
<!marker name=one>
<hr>
<!marker name=two>
</div>
<template for="two-things" marker=one>
<p>First thing</p>
</template>
<template for="two-things" marker=two>
<p>Second thing</p>
</template>
<!-- alternative where markers must have a name.
the sink attribute "exposes" the marker names.
if there are no markers, all children are replaced -->
<!-- replace all (no markers) -->
<div sink="container">
Loading...
</div>
<template for="container">
<p>result 1</p>
<p>result 2</p>
</template>
<!-- insertion point (single marker) -->
<ul sink="list-item">
<li>first item</li>
<!marker list-item>
<li>last item</li>
</ul>
<template for="list-item">
<li>middle item</li>
</template>
<!-- replace between (two markers) -->
<section sink="section-content">
<header>header stuff</header>
<!marker section-content>
Placeholder content
<!marker section-content>
<footer>footer stuff</footer>
</section>
<template for="section-content">
<p>Real content</p>
</template>
<!-- replace between (three markers) -->
<section sink="section-content">
<header>header things</header>
<!marker section-content>
Placeholder content
<!marker section-content>
...
<!marker section-content>
<footer>last thing</footer>
</section>
<template for="section-content">
<p>Real content</p>
</template>
This would replace between the first and second marker and leave the last marker.
As an alternative, it could replace between the first and last marker, but that
would make more than two markers pointless and an authoring error.
<!-- replace then append multiple times -->
<div sink="search-results">
Searching...
</div>
<template for="search-results">
<p>One result</p>
<!marker search-results>
</template>
<template for="search-results">
<p>Another result</p>
<!marker search-results>
</template>
<!-- two named markers patched separately -->
<div sink="one two">
<!marker one>
<hr>
<!marker two>
</div>
<template for="one">
<p>First thing</p>
</template>
<template for="two">
<p>Second thing</p>
</template>
<!-- variation on the above where markers don't have to have a name.
if there's no name, the marker matches and sink name in the for attribute,
so that most of the time there's no reason to name the marker. -->
<!-- replace all (no markers) -->
<div sink="container">
Loading...
</div>
<template for="container">
<p>result 1</p>
<p>result 2</p>
</template>
<!-- insertion point (single marker) -->
<ul sink="list">
<li>first item</li>
<!marker>
<li>last item</li>
</ul>
<template for="list">
<li>middle item</li>
</template>
<!-- replace between (two markers) -->
<section sink="section">
<header>header stuff</header>
<!marker>
Placeholder content
<!marker>
<footer>footer stuff</footer>
</section>
<template for="section">
<p>Real content</p>
</template>
<!-- replace then append multiple times -->
<div sink="search-results">
Searching...
</div>
<template for="search-results">
<p>One result</p>
<!marker>
</template>
<template for="search-results">
<p>Another result</p>
<!marker>
</template>
<!-- two named markers patched separately -->
This example remains unchanged, and names are necessary to make it work:
<div sink="one two">
<!marker one>
<hr>
<!marker two>
</div>
<template for="one">
<p>First thing</p>
</template>
<template for="two">
<p>Second thing</p>
</template>
<!-- mix of named an anonymous markers -->
<div sink="a-name">
<!marker a-name>
<hr>
<!marker>
</div>
<template for="a-name">
<p>First thing</p>
</template>
<template for="a-name">
<p>Second thing</p>
</template>
Desired/useful behavior is not obvious. If an anonymous marker matches any sink
name, then if <!marker a-name> and <!marker> switch places in the above example,
it doesn't change the behavior.
Alternatively, an anonymous marker matches only when there's no matching named
marker, so something like this would work:
<div sink="two one">
<!marker>
Placeholder content
<!marker>
<hr>
<!marker two>
Placeholder content
<!marker two>
</div>
<template for="one">
<p>First thing</p>
</template>
<template for="two">
<p>Second thing</p>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment