Skip to content

Instantly share code, notes, and snippets.

@vdsabev

vdsabev/lob-scripting.html

Last active October 6, 2023 12:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vdsabev/c29d2d4a39e48202987cedad25815556 to your computer and use it in GitHub Desktop.
Save vdsabev/c29d2d4a39e48202987cedad25815556 to your computer and use it in GitHub Desktop.
Download ZIP
Locality of Behavior scripting
Raw
lob-scripting.html
<!DOCTYPE html>
<html>
<head>
<title>LoB Scripting</title>
</head>
<body>
<template id="hello">
<h1></h1>
<select>
<option value="Mercury">Mercury</option>
<option value="Venus">Venus</option>
<option value="Earth">Earth</option>
<option value="Mars">Mars</option>
<option value="Jupiter">Jupiter</option>
<option value="Saturn">Saturn</option>
<option value="Uranus">Uranus (haha)</option>
<option value="Neptune">Neptune</option>
</select>
<script>
{
const $ = document.currentScript.parentElement;
const label = $.querySelector('h1');
const setName = (name) => {
label.textContent = `Hello ${name}`;
};
const select = $.querySelector('select');
select.addEventListener('input', () => setName(select.value));
select.value = $.dataset.name;
select.dispatchEvent(new Event('input'));
}
</script>
</template>
<main>
<section data-name="Earth">
<script>
{
const $ = document.currentScript.parentElement;
$.append(document.querySelector('#hello').content.cloneNode(true));
}
</script>
</section>
<section data-name="Mars">
<script>
{
const $ = document.currentScript.parentElement;
$.append(document.querySelector('#hello').content.cloneNode(true));
}
</script>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment