小编Nol*_*olo的帖子

我喜欢hyperHtml和lit-html的简单性,它们使用"标记模板文字"来仅更新模板的"可变部分".简单的javascript,不需要虚拟DOM代码和推荐的不可变状态.

我想尝试使用hyperHtml的自定义元素尽可能简单,支持<slot/>模板中的原则,但没有Shadow DOM.如果我理解正确,只有Shadow DOM才能使用插槽？

有没有办法或解决方法<slot/>在不使用Shadow DOM的情况下使用hyperHTML中的原则？

    <my-popup>
      <h1>Title</h1>
      <my-button>Close<my-button>
    </my-popup>

虽然有好处,但有些原因我不喜欢使用Shadow DOM:

• 我想看看我是否可以转换现有的SPA:所有必需的CSS样式现在都存在于SASS文件中,并编译为1个CSS文件.在Shadow DOM组件中使用全局CSS 是不可能的,我不想解开SASS(现在)
• Shadow DOM有一些性能成本
• 我不希望大型Shadow DOM polyfill有插槽(webcomponents-lite.js:84KB - unminified)