反射聚合物/网络组件接口

Posted 2023-02-23

【中文标题】反射聚合物/网络组件接口

【英文标题】：Reflecting polymer/web components interface

【发布时间】：2014-08-02 13:10:19

【问题描述】：

我想知道一般情况下是否可以检索聚合物网络组件的接口。据我所见，除了属性之外，聚合物网络组件还有很多东西，它是一种接口，相应的事件和轻型 DOM，但我还没有掌握如何以通用和可靠的方式确定这一点方式（阅读工具支持）。

对此的任何提示和 cmets 将不胜感激。 最好的祝福， 希尔玛

【参考方案1】：

这是 Web 组件的一般探索领域，而不仅仅是使用 Polymer 创建的组件：)

对于 Polymer，我们创建了一个文档系统（参见 core-component-page，它松散地基于 JSDocs。它抓取组件的文档属性、方法和事件，并呈现一个包含基本示例、文档和演示链接的页面. 示例：http://polymer.github.io/core-ajax/components/core-ajax/.

好消息是，当本机自定义元素在浏览器中可用时，属性/方法会自动显示在 devtool 控制台自动完成中。对于诸如可接受的 light dom 属性和 css 样式钩子之类的东西，……这些只需要可靠的文档。

【讨论】：

好的，太好了——这至少向我解释了当前的状态！ ;-)

【参考方案2】：

您可以使用 DOM 操作命令式地访问 Web 组件界面：

var fooComponent = document.createElement('foo-component');

fooComponent.doSomething();

fooComponent 看起来像什么。像这样：

Polymer('foo-component', 
  doSomething: function () 
    // do something
  
);

【讨论】：

好的，谢谢。这可能可以启发式地获取一些信息，尽管您的示例更多是关于强制实例化元素而不是获取有关属性和事件的真实元数据。但是例如整个 light DOM 没有在组件中显式描述，而只是在 shadow DOM () 中隐式处理，对我来说，这现在是概念上的一个空白，因为我认为组件应该公开显式元数据，以便某人实际上可以为 Web 组件构建可靠的设计时间。还是我还缺少什么？