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

[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()
      })
    };
  
</script>

2. 在index.html的之前增加一个button

<button onclick="downloadImage()">download</button>

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，这个字段会是空白。问题完美复现。

[qq15725]

4.4.16 中应该修复了

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