我正在学习网络组件.在设计自定义元素时,我必须决定在shadow DOM中隐藏什么.然后将剩余部分暴露在轻型DOM中.
据我所知,API允许两个具有不同权衡的极端用例:
我目前倾向于将所有内容隐藏在shadow DOM中,原因如下:
我错过了什么吗？
谢谢,我回答说这取决于部分回答我的问题的用例.但我仍然错过了关于我所处的案例的答案:我宁愿不支持某些组件的插槽.
我将为频谱的每个极端添加一个示例:
<template id=light-email-view>
<div>
<div><slot name=from></slot></div>
<ul><slot name=to></slot></ul>
<h1><slot name=subject></slot></h1>
<div><slot name=content></slot></div>
<ul><slot name=attachements></slot></ul>
<div class=zero-attachment-fallback>no attachments</div>
</div>
</template>
<template id=shadow-email-view>
<div></div>
</template>
<script>
...
let view = document.createElement('shadow-email-view');
// this method renders the email in the shadow DOM entirely
view.renderFromOject(email);
container.appendChild(view);
</script>
在第一个示例中,组件作者需要做更多工作,因为他们需要"解析"DOM:他们必须计算附件以切换回退; 基本上,任何不是浏览器的输入转换都会将一个元素从light DOM复制到匹配的shadow DOM插槽中.然后他们需要监听属性变化等等.组件用户还有更多的工作,他们必须将正确的元素插入到正确的插槽中,其中一些非常重要(电子邮件内容可能必须链接).
在第二个示例中,组件作者不需要实现支持从带有插槽的HTML实例化.但组件用户必须从JS实例化.所有渲染.renderFromObject都由组件作者在方法中完成.如果需要,一些其他方法提供钩子来更新视图. …