webcomponent

Question

webcomponent 写icon，为什么用innerHTML的写法，写的<svg></svg>写的不显示，帮我看看代码

Answer 1

1. 因为 Shadow DOM 具有隔离性，任何组件内部代码都无法影响外部。
2. 你的第一种写法没有展示相应的图标正是因为你的 svg path 在组件外部。在组件内部无法 use 外部 DOM。
3. 你第三种写法能够展示，是因为你的 path 作为组件的参数传入到了组件内部。内部可以 use。