Javascript （角度）自定义元素如何判断a<；插槽>；使用

我有一个自定义元素，其中有两个命名插槽。根据某些状态，将显示其中一个插槽。因此，假设自定义元素如下所示

所以，这个组件是这样使用的

默认值

小的

中等

大的

---

基本上，如果自定义元素的状态为

medium

，它将显示

medium

插槽。但是，如果未使用/定义介质插槽，则应显示默认插槽。如果可能的话，如何检测是否使用了插槽？

事实证明，您可以检查插槽是否包含元素。照办

element.shadowRoot.querySelector('slot[name=small]').assignedElements()[0];

---

请注意，这是不可能的示例代码，因为自定义元素不允许标记中没有连字符。一旦你给它们一个真正的标记名，它们的行为将与常规HTML元素相同，你将检查“是否使用了某些东西”，就像它们是

div

或

p

或其他任何东西一样。thnx，我已经更新了示例，使其有效。但是当启用shadowDom时，我注意到div不在shadowDom或slot中，因此如果在自定义元素中查询

[name=small]

您将什么也找不到。我将尝试在网上做一个例子！阴影dom是一个“黑匣子”，就像您不能查询选择音频或视频元素的播放控件一样。shadowdom的思想是，它是私有的、不受限制的标记，允许您（元素设计者）对您需要的内容进行建模，但对于页面上的所有其他内容，它们所得到的只是您的元素及其属性，仅此而已。它们不需要在元素内部进行查询。但是他们能做的是让你的元素做一些事情，你在属性监视中声明API函数，这样你的元素就可以根据函数调用和属性值改变它的内部状态。@Mike'Pomax'Kamermans，你的语句只对{mode:“closed”}shadowDOM正确。在我的例子中，我有一个“@angular/elements”自定义组件，它启用了shadowdom。所以，我要查询的是它自己的shadowdom，但页面上的任何内容都不应该进入另一个元素的shadowdom。除了您为元素设置的公共API之外，他们不需要知道任何其他信息。它不是另一个shadowdom，而是它自己的shadowdom。我正在使用@angular/elements创建自定义组件，我认为这是查询shadowdomah的唯一方法，这是一个非常不同的问题，我强烈建议您更新您的帖子，通过一个简单的示例（删除了大多数自定义元素）来充分说明这一点，演示您正在谈论的内容，那样的话。