自定义标签的一般应对方法。

[xudesheng]

上图的Label与Input，被封装在一个自定义Element里面，名字比如：xxx-textfield，Input中的输入，是在自定义标签的value中，从input中无法获取。 带来的问题是：转换时文本框里面的输入没有了。

粗略地看了一下你的代码，由于在utils.ts中没有针对自定义tag的判断，后来的取值与复制，也就无法处理这种绕弯弯的自定义Tag。

不知道您这儿有没有增加自定义Tag应对逻辑的一般流程？（比如：先在utils中增加判断，然后再改动哪个文件等），我自己看代码，怕有遗漏。

[qq15725]

自定义 tag 的元素或Web Component 应该也是可以正常克隆的，但是如果是依赖 js 实现的逻辑应该是无法生效（svg+xml 内无法执行 js）

可以考虑提供个最小实现的代码片段 👀

[xudesheng]

自定义 tag 的元素或Web Component 应该也是可以正常克隆的，但是如果是依赖 js 实现的逻辑应该是无法生效（svg+xml 内无法执行 js）

可以考虑提供个最小实现的代码片段 👀

https://github.com/mdn/web-components-examples/tree/main/edit-word 从表现来看，应该与这个例子的实现方式类似。

仔细看了一样，几乎一样。真实的value，是在input的value中。

Update: 上面这个例子，转成图片没有问题，我还要去找他们的代码看看。

[xudesheng]

Ok,终于能够复现这个问题了。 将上述例子的index.html, main.js，做如下改动，能够重现这个问题。

1. in index.html, 在header内增加如下代码：

   
   <script src="modern-screenshot.js"></script>
   <script>
   const downloadImage=()=>{
     modernScreenshot.domToPng(document.querySelector('body')).then(dataUrl => {
       const link = document.createElement('a')
       link.download = 'screenshot.png'
       link.href = dataUrl
       link.click()
     })
   };

2. 在index.html的</body>之前增加一个button

download

3.  在main.js中，修改一下updateDisplay函数：

function updateDisplay() { span.style.display = 'inline-block'; form.style.display = 'none'; span.textContent = input.value; input.style.width = span.clientWidth + 'px'; span.style.display = 'none'; // <--- add form.style.display = 'inline-block'; // <--- add }

点击那个“Chris”，然后修改内容，然后再点击Download，这个字段会是空白。问题完美复现。

<img width="349" alt="image" src="https://user-images.githubusercontent.com/8742037/234091468-7c0afab8-4161-4d4e-b937-d8bcd7cb0da8.png">

<img width="358" alt="image" src="https://user-images.githubusercontent.com/8742037/234091499-f1f79a53-249a-4870-97c4-1accda813431.png">

<img width="363" alt="image" src="https://user-images.githubusercontent.com/8742037/234091534-52e9e2df-c361-4b28-bd8b-7d605fdb3e9c.png">

[qq15725]

4.4.16 中应该修复了

https://codesandbox.io/s/quizzical-matan-lxhrev?file=/index.html