假设从Polymer元素中调用以下内容:
this.fire("reset-counters");.
将reset-counters事件发布到该监听该事件或在听说称为元素中的所有元素this.fire()而已？
对于CustomElements，我可以这样做：
class MyElement extends HTMLElement {}
我可以对SVG Elements做同样的事情吗？喜欢
class MyOwnRectangle extends SVGRectElement {}
如果可行，我可以麻烦别人使用jsbin吗？
如果没有，为什么不呢？
这有一些很好的用例，例如能够将模型数据存储在元素本身中。SVG 操作基本上用于两个主要领域：
诸如JointJS之类的库以类的形式（扩展了Backbone视图）具有自己的抽象，以存储与视图（屏幕上的SVG图）关联的模型数据。
就像WebComponents最终可以以标准方式替代Framework X的jQuery插件一样，为什么不对SVG这样做呢？
最后，
Polymer 0.5如何做到这一点？
此修补程序如何在Polymer 1.0中做到这一点？
https://github.com/Polymer/polymer/pull/3372
现在有什么替代方案？
我想我们可以扩展HTMLElement。在我们ShadowDOM使用的<svg>元素，然后附上所有我们其实是想延长，如SVG标签<rect>，<polyline>等等！也许更干净的方法呢？
将来会实施吗？
在shadow DOM v0中,开发人员不需要了解如何将light DOM内容放置在组件的阴影dom中的内部实现.
V0的规格相匹配的内置组件的当前行为像<select>和<option>在消费者不关心我在那里特别是它们的元素内容将被放置.相反,shadow DOM会自动选取与标记select属性中指定的选择器匹配的元素,<content>并将它们放在阴影树内的正确位置.消耗开发人员的代码需要较少的样板.
在v1中,您需要具体了解插槽名称.模仿前面提到的相同示例<select>,我需要使用类似<option slot="option">插槽属性值指定放置当前元素的位置的内容.我也可以添加那些不打算包含在那个插槽中的元素<table slot="option">.
总之,我的担忧是:
在阴影DOM v1中有一种方法可以获得<content select="option"></content>孩子必须匹配特定选择器的旧行为,还是被丢弃？如果没有,有谁知道为什么特别是这么大的突破性改变？
例1(v0规范)
的index.html
<my-component>
<my-child-component>Text</my-child-component>
<wrong-child-component>Wrong</wrong-child-component>
</my-component>
component.html(shadow DOM)
<div>
<content select="my-child-component"></component>
</div>
结果DOM
<my-component>
#shadow-root
<div>
<my-child-component>Text</my-child-component>
</div>
<my-component>
例2(v1规范)
的index.html
<my-component>
<my-child-component slot="child-slot">Text</my-child>
<wrong-child-component slot="child-slot">Wrong</wrong-child-component>
</my-component>
component.html(shadow DOM)
<div>
<slot name="child-slot"></slot>
</div>
结果DOM
<my-component>
#shadow-root
<div>
<my-child-component>Text</my-child-component>
<wrong-child-component>Wrong</wrong-child-component>
</div>
<my-component>
当我创建一个Polymer 2.0元素时,只有ready生命周期回调似乎会触发,我无法理解为什么.例如,我有这个Polymer元素:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="flip-four-board">
<script>
class FlipFourBoard extends Polymer.Element {
static get is() { return "flip-four-board"; }
created() {
super.created();
console.log("created");
}
ready() {
super.ready();
console.log("ready");
}
attached() {
super.attached();
console.log("attached");
}
detached() {
super.detached();
console.log("detached");
}
}
customElements.define(FlipFourBoard.is, FlipFourBoard);
</script>
</dom-module>
但是当我将它插入这样的页面时:
<!DOCTYPE html>
<html>
<head>
<title>Flip Four Board Tests</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../flip-four-board.html">
<style type="text/css">
html, body {
width: 95%;
height: 95%;
}
</style>
</head>
<body>
<flip-four-board></flip-four-board>
</body>
</html> …我正在迈入Web组件的第一步，而未使用任何第三方库（例如Polymer）。主要卖点之一是Web组件样式与其他地方定义的样式分开，从而允许在类似于沙盒的环境中对组件的shadow-DOM进行样式设置。
我遇到的问题是样式如何通过插槽元素级联。由于带槽的元素不是影子DOM的一部分，因此只能用::slotted()组件模板中的选择器对其进行定位。这很棒，但是几乎不可能保证Web组件在所有上下文中都能正确显示，因为外部定义的样式还具有无可比拟的专一性*应用于空位元素。
*此外!important。
这个问题可以归结为：
customElements.define("my-nav",
class extends HTMLElement {
constructor() {
super();
const template = document.querySelector("template#my-nav").content;
this.attachShadow({ mode: "open" })
.appendChild(template.cloneNode(true));
}
}
);a {
color: red; /* >:( */
}<template id="my-nav">
<style>
.links-container ::slotted(a) {
color: lime;
font-weight: bold;
margin-right: 20px;
}
</style>
<div class="links-container">
<slot name="links"></slot>
</div>
</template>
<p>I want these links to be green:</p>
<my-nav>
<a href="#" slot="links">Link 1</a>
<a href="#" slot="links">Link 2</a>
<a href="#" slot="links">Link 3</a>
</my-nav> …javascript html5 web-component shadow-dom native-web-component
我目前正在尝试使用StencilJS来创建一些Web组件.
现在我知道有<slot />和名称插槽和所有东西.来自React,我猜插槽与React中的儿童类似.你可以在React中使用孩子做很多事情.我经常做的事情:
你会如何使用插槽/网络组件/ stencilJS？
我可以使用Stencil获取我的Web组件的主机元素
@Element() hostElement: HTMLElement;
我使用我的组件
<my-custom-component>
<button>1</button>
<button>2</button>
<button>3</button>
</my-custom-component>
我想渲染类似的东西
render() {
return slottedChildren ?
<span>No Elements</span> :
<ul class="my-custom-component">
slottedChildren.map(child => <li class="my-custom-element>{child}</li>)
</ul>;
}
亲切的问候
这是那些“我们应该对此做些什么”的问题之一。如您所知，Web组件应该是包含在网站中的小型应用程序。但是，有时需要根据嵌入它们的网站来设置样式。
示例：“注册我们的新闻通讯”组件。该组件将包含一些关键项：
我们将以Google和YouTube为例。Google的配色方案为蓝色（让我们想象一下），而YouTube的配色方案为红色。该组件将类似于<newsletter-signup></newsletter-signup>您在其中嵌入页面的组件。Google和YouTube都具有此组件。
当组件需要从Google和YouTube继承样式时，就会出现问题。一些不推荐使用的CSS选择器将对此非常有用，因为Google和YouTube的样式表可以仅为Shadow DOM启用颜色，因此我们不必复制/粘贴样式。从理论上讲，该组件应该对主机的样式一无所知，因为我们希望它从主机（Google和YouTube）继承。
目前，我正在使用Angular 6创建一个Web组件，该组件具有很多样式，因为它具有很多元素。我从宿主站点复制/粘贴样式，Bootstrap，图标等，然后根据对其进行样式设置<newsletter-signup brand="google"></newsletter-signup>。因此，例如，如果品牌是Google，则颜色应为红色。
这确实很糟糕，原因如下：
作为开发人员，我将如何考虑这一点？如何在主机上制作样式，然后将其应用于Web组件（称为继承）？我确定有人在遇到Shadow DOM时遇到了与我完全相同的问题。谢谢阅读。
Anyone that has a good setup for testing custom elements with jest with jsdom or similar? I have been using Puppeteer ans Selenium, but they slows down the test runs too much. Any other alternatives to or fixes for jsdom that makes the below test runnable?
import {LitElement} from 'lit-element';
import {html} from 'lit-html';
export class Counter extends LitElement {
static get properties() {
return Object.assign({}, super.properties, {
count: {type: Number}
});
}
render() {
return html`Count is ${this.count}`;
} …我正在制作 vanilla-js 网络组件，需要将对象作为其值传递给属性，但每次都将其作为字符串。
我能够将字符串传递给组件的属性，但我知道我需要传递一个对象。
var obj = { name: "John", age: 30, city: "New York" };
const template = document.createElement('template');
class TabelComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
console.log(this.content);
}
get content() {
return this.getAttribute("content")
}
}
window.customElements.define('table-component', TabelComponent);<table-component content=obj></table-component>我的属性“内容”应该将 obj 作为对象而不是字符串。我应该进入
{ name: "John", age: 30, city: "New York" };控制台
如果我使用 Lit-element，当前设置全局/重置 CSS 的最佳实践是什么？
我已经尝试过 1) 将它们内联到<style>我的文档根目录中，2) 像这个答案一样构建样式表
<script>
var css = new CSSStyleSheet()
css.replace('@import url("./style/static/reset.css")')
document.adoptedStyleSheets = [css]
</script>
但没有任何作用...
编辑
我的reset.css：
blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
p,
pre,
button,
ul {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
我建立在来自https://open-wc.org/guide/#quickstart的文件夹结构脚手架之上
web-component ×10
javascript ×5
polymer ×4
lit-element ×2
shadow-dom ×2
angular ×1
angular6 ×1
browser ×1
css ×1
events ×1
html ×1
html5 ×1
jestjs ×1
jquery ×1
jsdom ×1
lifecycle ×1
object ×1
polymer-1.0 ×1
polymer-2.x ×1
stenciljs ×1
svg ×1