RetroBBS - comp.lang.javascript - Re: cloning templates with ids

cloning templates with ids

<bd5507b8-c6a6-46b8-b664-a7ff0e31f394n@googlegroups.com>

https://www.rocksolidbbs.com/devel/article-flat.php?id=18229&group=comp.lang.javascript#18229

copy link Newsgroups: comp.lang.javascript

X-Received: by 2002:a05:6214:946:b0:63d:b79:43ab with SMTP id dn6-20020a056214094600b0063d0b7943abmr48759qvb.4.1691425071974;
Mon, 07 Aug 2023 09:17:51 -0700 (PDT)
X-Received: by 2002:a05:6870:9551:b0:1bb:4d41:e924 with SMTP id
v17-20020a056870955100b001bb4d41e924mr11585900oal.8.1691425071760; Mon, 07
Aug 2023 09:17:51 -0700 (PDT)
Path: i2pn2.org!i2pn.org!usenet.blueworldhosting.com!diablo1.usenet.blueworldhosting.com!peer03.iad!feed-me.highwinds-media.com!news.highwinds-media.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Mon, 7 Aug 2023 09:17:51 -0700 (PDT)
Injection-Info: google-groups.googlegroups.com; posting-host=24.107.183.247; posting-account=G1KGwgkAAAAyw4z0LxHH0fja6wAbo7Cz
NNTP-Posting-Host: 24.107.183.247
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <bd5507b8-c6a6-46b8-b664-a7ff0e31f394n@googlegroups.com>
Subject: cloning templates with ids
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Mon, 07 Aug 2023 16:17:51 +0000
Content-Type: text/plain; charset="UTF-8"
X-Received-Bytes: 2197

by: luserdroog - Mon, 7 Aug 2023 16:17 UTC

Is there a simpler gymnastics to set the id on an element
in a document fragment, just before you append it into the
DOM? I got this working but it feels heavy handed. Would some
wild object decomposition/comprehension let me set the inner
id and return the outer fragment in a one-liner?

<html>
<body>
<template id="clickbox">
<click-box cycle
states="empty checkmark xmark questionmark"
empty=""
checkmark="&check;"
xmark="✖"
questionmark="?"></click-box>
</template>
</body>
<script src="click.js"></script>
<script>
var clickbox = document.querySelector("#clickbox");
var box1 = clickbox.content.cloneNode( true );
box1.querySelector("click-box").id = "box1";
var box2 = clickbox.content.cloneNode( true );
box2.querySelector("click-box").id = "box2";
var box3 = clickbox.content.cloneNode( true );
box3.querySelector("click-box").id = "box3";
document.body.appendChild( box1 );
document.body.appendChild( box2 );
document.body.appendChild( box3 );
document.querySelector("#box3").shadowRoot.querySelector("#box").click();
console.log( box3.value );
console.log( document.querySelector("#box3").value );
</script>
</html>

Re: cloning templates with ids

<aeb972a8-1c03-481f-b56d-a836b8f2c106n@googlegroups.com>

copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18230&group=comp.lang.javascript#18230

copy link Newsgroups: comp.lang.javascript

X-Received: by 2002:a05:620a:6a85:b0:76c:daf4:2787 with SMTP id ud5-20020a05620a6a8500b0076cdaf42787mr28955qkn.4.1691425386417;
Mon, 07 Aug 2023 09:23:06 -0700 (PDT)
X-Received: by 2002:a05:6830:458e:b0:6bc:6658:2d3f with SMTP id
az14-20020a056830458e00b006bc66582d3fmr8595542otb.1.1691425386054; Mon, 07
Aug 2023 09:23:06 -0700 (PDT)
Path: i2pn2.org!i2pn.org!usenet.blueworldhosting.com!diablo1.usenet.blueworldhosting.com!peer03.iad!feed-me.highwinds-media.com!news.highwinds-media.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Mon, 7 Aug 2023 09:23:05 -0700 (PDT)
In-Reply-To: <bd5507b8-c6a6-46b8-b664-a7ff0e31f394n@googlegroups.com>
Injection-Info: google-groups.googlegroups.com; posting-host=24.107.183.247; posting-account=G1KGwgkAAAAyw4z0LxHH0fja6wAbo7Cz
NNTP-Posting-Host: 24.107.183.247
References: <bd5507b8-c6a6-46b8-b664-a7ff0e31f394n@googlegroups.com>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <aeb972a8-1c03-481f-b56d-a836b8f2c106n@googlegroups.com>
Subject: Re: cloning templates with ids
From: luser.droog@gmail.com (luserdroog)
Injection-Date: Mon, 07 Aug 2023 16:23:06 +0000
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
X-Received-Bytes: 2530

by: luserdroog - Mon, 7 Aug 2023 16:23 UTC

On Monday, August 7, 2023 at 11:17:58 AM UTC-5, luserdroog wrote:
> Is there a simpler gymnastics to set the id on an element
> in a document fragment, just before you append it into the
> DOM? I got this working but it feels heavy handed. Would some
> wild object decomposition/comprehension let me set the inner
> id and return the outer fragment in a one-liner?
>

Oops. Sorry for the fuss. That's what a function is for. duh.

<html>
<body>
<template id="clickbox">
<click-box cycle
states="empty checkmark xmark questionmark"
empty=""
checkmark="&check;"
xmark="✖"
questionmark="?"></click-box>
</template>
</body>
<script src="click.js"></script>
<script>
function newbox( id ){
let box = clickbox.content.cloneNode( true );
box.querySelector("click-box").id = id;
return box;
} var clickbox = document.querySelector("#clickbox");
var box1 = newbox( "box1" );
var box2 = newbox( "box2" );
var box3 = newbox( "box3" );
document.body.appendChild( box1 );
document.body.appendChild( box2 );
document.body.appendChild( box3 );
document.querySelector("#box3").shadowRoot.querySelector("#box").click();
console.log( box3.value );
console.log( document.querySelector("#box3").value );
</script>
</html>

You can be replaced by this computer.

devel / comp.lang.javascript / Re: cloning templates with ids

Subject	Author
cloning templates with ids	luserdroog
Re: cloning templates with ids	luserdroog