与开发工具一样，我终生都在研究这个问题。
<div>
<span>Hi :)</span>
</div>
我很喜欢使用Web组件，但是我不喜欢这样，这迫使我实质上两次单击两次。
<cool-div>
#shadowroot
<cool-span>
#shadowroot
"Hi :)"
</cool-span>
</cool-div>
我有什么选择可以使其在开发工具中更容易使用？我的意思是，一个好的开始可能就像扩展cool-div会扩展其#shadowroot一样简单，这样我就不必单击两次，但理想情况下也摆脱了我可以适应垂直方向一半的事实屏幕上的内容。我会采取一些使它不那么尴尬的技巧。
谢谢。