展示WebComponent中的子元素的方法
P粉514001887
2023-09-04 09:18:39
<p>我正在尝试将一个React组件重建为WebComponent,以便摆脱对React的依赖。</p>
<p>我希望在HTML中看到一个像这样的WebComponent:</p>
<pre class="brush:php;toolbar:false;"><editable-h1>Hello, world</editable-h1></pre>
<p>它应该呈现如下:</p>
<pre class="brush:php;toolbar:false;"><span>
<h1>Hello, world</h1>
<button onClick=this.onEdit>Edit</button>
</span></pre>
<p>如果我点击编辑按钮,我希望它呈现如下:</p>
<pre class="brush:php;toolbar:false;"><form>
<input type='text' value='Hello, world'></input>
<button onClick=this.onSave>Save</button>
</form></pre>
<p>点击保存按钮会通过API调用将更改保存到数据库,并返回到原始呈现(但文本已经被编辑过)。</p>
<p>我相信我可以处理切换呈现和进行API调用,但我困惑的是如何从初始的WebComponent中获取子元素文本“Hello, world”以便进行呈现。</p>
在开标签
<editable-h1>
上触发connectedCallback
事件所以你的
Hello World
的innerHTML还没有被解析要等到解析完成后再执行,使用
setTimeout
注意:所有提供
parsedCallback
的工具和库都会在底层使用类似的技巧,使用requestAnimationFrame
或MutationObserver
(还有更多代码行)。如果你认为一行
setTimeout
是一个hack,或者你不想使用setTimeout
浪费那一毫秒,可以查看Andrea Giammarchi的html-parsed-element代码(当然需要加载和解析,还会增加依赖和代码复杂性,所以总体需要更多时间)
并且关注WC专家,这个讨论还在继续:
需要一个回调函数来在子元素改变或解析完成后执行 https://github.com/WICG/webcomponents/issues/809
所有方法归结为同一个目标:等待事件循环为空
什么是事件循环?https://www.youtube.com/watch?v=8aGhZQkoFbQ