我目前正在测试自定义元素的性能,因此我无需注册以前注册的元素.我找不到任何相关的东西.
我认为可能需要这样做,但在我没有更详细地研究这个问题之前,我不会做任何假设.
我知道我可以刷新页面,但这不是重点.
到目前为止,我已经完成了以原生的,规范的方式注册元素:
document.registerElement('my-element', {
prototype: Object.create(HTMLElement.prototype)
});
我试图从ng-conf工作中获得Angular 2.0 +聚合物组件演示(youtube-app)一直没有成功,但似乎需要补丁来zoom.js和angular本身,这是我无法找到的.
需要帮助修补两个应用程序才能工作.或者,如果任何人可以与Polymer Elements共享Angular的任何其他工作示例,那就可以了.
我听过很多关于Angular第二次出现的讨论,似乎有很多很棒的东西,但我知道Angular 1.0没有开箱即用的Web Components集成.
我已经阅读了一些关于Angular2的内容,并且它不再使用指令.所以我想知道这是否意味着Angular2将使用Polymer/HTML模板和其他Web组件而无需任何额外的集成？
我一直在尝试HTML5和SVG; 我对JavaScript和Web开发都很陌生,所以我可能会缺少一些东西.我正在尝试创建可重用的Web组件,利用一些新功能,如HTML Imports,Shadow DOM和扩展现有的Web元素.我有两个html文件:
<html>
<head>
<title>Test HTML5</title>
</head>
<body>
<link rel="import" href="Elements/tank.html">
<svg width="100%"
viewBox="0 0 500 500"
style="border: solid; border-width: thin; stroke-width: 2;">
<polyline points="0,300 100,300 100,100 250,100 250,150 500,150"
style="fill:none;stroke:black;stroke-width:3"
onclick="window.alert('you clicked line')" />
<svg is="my-tank" x="200" y="350" width="50" height="50"></svg>
</svg>
</body>
</html>
<html>
<body>
<template id="tank">
<rect fill="red" width="50" height="50"></rect>
</template>
<script type="text/javascript">
var tankElement = document.currentScript.ownerDocument.querySelector('#tank');
document.registerElement('my-tank', {
prototype: Object.create(SVGSVGElement.prototype, {
createdCallback: {
value: function () {
var root = this.createShadowRoot();
//Works
root.innerHTML …我正在尝试设置阴影DOM根的子元素.
这定义了一个名为的自定义元素element-el,它有一个span名为'x'的字母,其中包含字母x,我想要的,事情状态为红色.
class El extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode:'open'});
shadow.innerHTML = '<span class="x">X</span>';
}
}
customElements.define ('element-el',El);
我试过那些CSS样式:
element-el::slotted(.x) {
color:red;
}
element-el::host .x {
color:red;
}
element-el:host .x {
color:red;
}
element-el::shadow .x {
color:red;
}
element-el /deep/ .x {
color: red;
}
element-el::content .x {
color:red;
}
X不会变红.我正在使用Chrome 56,它应该支持这个......
我想在没有style在shadow DOM中放置元素的情况下设置样式.
这是一个codepen:http://codepen.io/anon/pen/OpRLVG？edit = 1111
编辑:
本文表明,它是可能的风格影儿从外部CSS文件-仅仅因为他们错了吗？
我的团队和我在我们的项目中使用React,我们正在考虑使用这些工具之一react-cosmos,Atellier或React Storybook来构建UI组件.
我的问题
这三种工具之间的主要区别是什么？
使用每个人的利弊和利弊是什么？
更新
自从我开始研究这个以来,我找到了https://npmcompare.com/compare/kadira-storybook,react-cosmos-webpack
和
https://github.com/react-cosmos/react-cosmos/issues/233
谢谢您的帮助!
我想用scala.js在Polymer 2.0项目中开发一些web组件.虽然github上有一个很棒的演示项目,展示了它如何与Polymer 1.0一起工作.我不能得到类似于使用Polymer 2.0和原生元素注册技术的东西.
简单的外观可能如下所示
@ScalaJSDefined
class PolymerElement extends PolymerBase {
def is: String = ""
def properties: js.Dynamic = js.Dynamic.literal()
}
@js.native
@JSGlobal("Polymer.Element")
class PolymerBase extends HTMLElement
实际元素:
@JSExportTopLevel("MyElement")
@ScalaJSDefined
class MyElement extends PolymerElement {
private var label = "init"
override def is = "my-element"
override def properties = js.Dynamic.literal(
"label" -> Map(
"type" -> "String",
"value" -> "init",
"notify" -> true
).toJSDictionary
)
def testMe = {
println(label)
}
}
object MyElement {
@JSExportStatic …我一直是一个很长的Angular 1.x用户,现在我正在使用Angular 4创建一个新的应用程序.我仍然没有掌握大多数概念,但我终于有一些非常好的工作.但是,我有一个问题,我需要使用Leaflet在Marker的弹出窗口中显示Angular 4组件(尽管在1.x中我只是使用了指令).
现在,在Angular 1.x中我可以使用$ compile对模板中的指令(`<component>{{ text }}</component>`)里面的按钮等等它会起作用,但是Angular 4与它的AoT完全不同,并且在运行时编译似乎真的很棒很难,并没有简单的解决方案.
我在这里问了一个问题,作者说我可以使用指令.我不确定这是否是正确的方法,甚至不知道如何将我自己的代码与他提出的解决方案混合...所以我做了一个基于npm的小项目,Angular 4和Leaflet已经设置好,以防你知道如何帮助我还是想试一试(我非常感谢!).我一直在敲打这个可能已经一个星期了,我真的厌倦了尝试了很多替代品而没有成功:(
这是我在GitHub中的回购链接:https://github.com/darkguy2008/leaflet-angular4-issue
我们的想法是在Marker中生成PopupComponent(或类似的东西),代码可以在src/app/services/map.service.ts第38行找到.
提前致谢!:)
编辑
我设法解决了:)看到标记答案的细节,或这个差异.有一些警告,Angular 4和Leaflet的程序有点不同,它不需要那么多的变化:https://github.com/darkguy2008/leaflet-angular4-issue/commit/b5e3881ffc9889645f2ae7e65f4eed4d4db6779b
我还从这里解释的解决方案中创建了一个自定义编译服务,并上传到相同的GitHub存储库.谢谢@yurzui!:)
我正在探索什么是polyfill，然后观看了一个YouTube视频（https://www.youtube.com/watch?v=eSdAC8d5_Nw&t=379s），了解了如何使用polyfill在不受支持的浏览器中显示Web组件，特别是我将目标锁定在Microsoft Edge上。
我已经在YouTube视频显示时尝试了HTMLElements，并且一切正常，但是当我尝试对LitElement进行同样操作时，即使在Chrome等浏览器中也不会显示该组件。
我已经使用此链接当前正在使用的文件创建了一个Plunker文件（http://plnkr.co/edit/w4np7dbm3N9yk1DFWA3W）Index.html是我试图显示我拥有的所有组件的网页创建。我拥有的要素是<web-component></web-component>和<todo-view></todo-view>。
Web组件是在app.js中定义的HTMLElement，其中todo-view是在todo-view.js中定义的LitElement。
在Microsoft Edge中，没有收到任何错误消息，但未显示todo-view组件。任何帮助将非常感激！
我有一个 Web 组件，可以在 Shadow dom 中呈现以下内容：
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
</div>
...
</custom-banner>
要设置 的样式headertext，以下 css 效果很好：
custom-banner::part(headertext) {
border: 5px solid green;
}
现在说我有这样的东西：
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
<span>I am the subheader text!</span>
</div>
...
</custom-banner>
有没有办法针对阴影部分的孩子？也就是说，像这样的东西（这似乎不起作用）：
custom-banner::part(headertext) span {
border: 5px solid red;
}
我意识到这种事情可能会削弱 的整个目的::part，但也许不会？
需要明确的是，在此示例中，子标题范围不是带槽子项。它始终是组件的一部分，并且位于Shadow dom 中。上面的示例是在浏览器中渲染的组件。
谢谢！
web-component ×10
angular ×3
polymer ×3
shadow-dom ×3
css ×2
javascript ×2
es6-class ×1
html5 ×1
leaflet ×1
lit-element ×1
polyfills ×1
polymer-2.x ×1
reactjs ×1
scala.js ×1
svg ×1