我喜欢 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 的一些原因:
最佳答案
让我开始描述什么是插槽以及它们解决了什么问题。
刚刚停放的数据
在你的布局中有槽是 HTML 尝试让你在布局中放置一些数据,然后通过 JavaScript 处理它。
你甚至不需要 Shadow DOM 来使用插槽,你只需要一个带有命名插槽的模板来放置值。
<user-data>
<img src="..." slot="avatar">
<span slot="nick-name">...</span>
<span slot="full-name">...</span>
</user-data>
你能发现那个组件和下面的 JavaScript 之间的区别吗?
const userData = {
avatar: '...',
nickName: '...',
fullName: '...'
};
换句话说,通过像下面这样的函数,我们已经可以将槽转换为由属性寻址的有用数据。
function slotsAsData(parent) {
const data = {};
parent.querySelectorAll('[slot]').forEach(el => {
// convert 'nick-name' into 'nickName' for easy JS access
// set the *DOM node* as data property value
data[el.getAttribute('slot').replace(
/-(\w)/g,
($0, $1) => $1.toUpperCase())
] = el; // <- this is a DOM node, not a string ;-)
});
return data;
}
插槽作为 hyperHTML 插值
现在我们有了一种寻址槽的方法,我们所需要的只是一种将它们放置在我们的布局中的方法。
理论上,我们不需要自定义元素来实现。
document.querySelectorAll('user-data').forEach(el => {
// retrieve slots as data
const data = slotsAsData(el);
// place data within a more complex template
hyperHTML.bind(el)`
<div class="user">
<div class="avatar">
${data.avatar}
</div>
${data.nickName}
${data.fullName}
</div>`;
});
但是,如果我们想使用 Shadow DOM 来保护样式和节点免受不希望的页面/第三部分污染,我们可以按照 this Code Pen example 所示进行操作。基于自定义元素。
如您所见,唯一需要的 API 是 attachShadow API,并且有一个 super lightweight polyfill for just that重量为 1.6K 最小压缩。
最后,但并非最不重要的是,您可以在 hyperHTML 模板文字中使用插槽并让浏览器进行转换,但这将需要更重的 polyfill,我不建议在生产中使用它,特别是当有更好更轻的替代方案时,如下所示。
我希望这个答案对你有帮助。
关于hyperhtml - 有没有一种方法/解决方法可以在不使用 Shadow DOM 的情况下在 hyperHTML 中使用插槽原理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48726904/