我正在尝试创建一个自定义元素polymer-element,但我无法完成@CustomTag工作.我的dart文件(my_element.dart)看起来像这样:
@HtmlImport('my_element.html')
library projects.projectFolder.layout;
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('my-element')
class MyElement extends PolymerElement {
@published String caption;
MyElement.created() : super.created();
}
Run Code Online (Sandbox Code Playgroud)
我的html文件(my_element.html)看起来像这样:
<link rel="import" href="../../../../packages/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my_element.css">
<core-toolbar>
<h1>{{ caption }}</h1>
</core-toolbar>
</template>
<script type="application/dart" src="../my_element.dart"></script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
问题是Chrome控制台继续打印以下错误:
No elements registered in a while, but still waiting on 1 elements to be registered. Check that you have a class with an @CustomTag annotation for …Run Code Online (Sandbox Code Playgroud) 我想知道聚合物有多少SEO友好.
由于所有代码都像Angular一样完全动态,搜索引擎如何获取页面信息?因为在Angular中做事,我真的很难让SEO友好.
是否有工具自动生成_escaped_fragment_以提供搜索引擎?
我猜谷歌可能已经想到了解决方案,但我无法找到它(即使在谷歌上).
根据Polymer FAQ,我们所拥有的只是
爬虫了解自定义元素?SEO如何运作?
他们没有.但是,搜索引擎一直在处理基于AJAX的重型应用程序.远离JS并且更具说服力是一件好事,通常会让事情变得更好.
http://www.polymer-project.org/faq.html#seo
不是很有帮助
我已经研究了很多,但仍然没有找到一个好的答案.我何时应该使用on-click何时使用on-tap聚合物?
本指南侧重于程序化事件监听器,因此在这方面没有帮助:
我想知道为什么Polymer元素需要在自定义元素名称中使用破折号,就像<my-component>Angular组件不需要这样,特别是Angular组件也使用ShadowDOM.
**编辑**它似乎甚至没有被建议在Angular中做好.
一年后调查Dart,我没有看到任何全面的小部件库.我在GitHub上看到了KevMoo的Widget.Dart项目,但实际上没有一个小部件能够正常工作.我目前在我的项目中使用AngularJS,并且拥有一组很棒的库,例如Boostrap UI和ng-grid,这使我能够在不重新创建轮子的情况下提高工作效率.Dart中有这样的东西吗?
如何在shadow DOM中选择节点?请考虑以下示例:
"没有阴影"的DOM的结构
<app-element>
#shadow-root
<h2></h2>
<content>
#outside shadow
<h2></h2>
</content>
<ui-button>
#shadow-root
<h2></h2>
</ui-button>
</app-element>
Run Code Online (Sandbox Code Playgroud)
的index.html
<body>
<app-element>
<!-- OK: querySelect('app-element').querySelect('h2') -->
<!-- OK: querySelect('app-element h2') -->
<!-- There is no problem to select it -->
<h2>app-element > content > h2</h2>
</app-element>
</body>
Run Code Online (Sandbox Code Playgroud)
templates.html
<polymer-element name="ui-button" noscript>
<template>
<!-- FAIL: querySelect('app-element::shadow ui-button::shadow h2') -->
<h2>app-element > ui-button > h2</h2>
</template>
</polymer-element>
<polymer-element name="app-element" noscript>
<template>
<!-- FAIL: querySelect('app-element::shadow').querySelect('h2') -->
<!-- FAIL: querySelect('app-element::shadow h2') -->
<!-- FAIL: querySelect('app-element').shadowRoot.querySelect('h2') -->
<h2>app-element …Run Code Online (Sandbox Code Playgroud) 我希望子元素分派自定义事件和父元素来监听它,并采取一些行动.使用Polymer时如何执行此操作?
Angular为您提供动态双向数据绑定的可能性.但它也允许您创建自定义元素和指令.
所以,如果我在Dart中使用Angular,则不再需要Polymer,是不是?
我希望使用聚合物和飞镖制作一个通用列表.我正在扩展UL元素.我想将模板变量放在此自定义元素的内容中.
<ul is="data-ul">
<li>{{item['first_name']}}</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
自定义元素
<polymer-element name="data-ul" extends="ul">
<template repeat="{{item in items}}">
<content></content>
</template>
<script type="application/dart" src="data-ul.dart"></script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)
我期待模板变量被插值,但它只是按原样输出到DOM.如何输出要呈现为模板的内容标记,而不仅仅是直接输出?
我试图使用paper-button与type属性设置为submit(作为一个将与做button元素)提交封闭form,但由于某种原因,无法提交表单.这是一个错误或功能吗?
如何paper-button提交表格?
PS:我在飞镖地(不是js).