Closed xudesheng closed 1 year ago
自定义 tag 的元素或Web Component 应该也是可以正常克隆的,但是如果是依赖 js 实现的逻辑应该是无法生效(svg+xml
内无法执行 js)
可以考虑提供个最小实现的代码片段 👀
自定义 tag 的元素或Web Component 应该也是可以正常克隆的,但是如果是依赖 js 实现的逻辑应该是无法生效(
svg+xml
内无法执行 js)可以考虑提供个最小实现的代码片段 👀
https://github.com/mdn/web-components-examples/tree/main/edit-word 从表现来看,应该与这个例子的实现方式类似。
仔细看了一样,几乎一样。真实的value,是在input的value中。
Update: 上面这个例子,转成图片没有问题,我还要去找他们的代码看看。
Ok,终于能够复现这个问题了。 将上述例子的index.html, main.js,做如下改动,能够重现这个问题。
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
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">
上图的Label与Input,被封装在一个自定义Element里面,名字比如:xxx-textfield,Input中的输入,是在自定义标签的value中,从input中无法获取。 带来的问题是:转换时文本框里面的输入没有了。
粗略地看了一下你的代码,由于在utils.ts中没有针对自定义tag的判断,后来的取值与复制,也就无法处理这种绕弯弯的自定义Tag。
不知道您这儿有没有增加自定义Tag应对逻辑的一般流程?(比如:先在utils中增加判断,然后再改动哪个文件等),我自己看代码,怕有遗漏。