我知道有关于多重继承/组合的这个问题.但是,似乎这个问题更多的是关于如何从其他元素中的多个现有元素重用功能.显然,解决方案就是mixins.
我想知道,如何在不真正借用现有元素的情况下实际"装饰"现有元素.我们知道extends可以使用这个属性来扩展Polymer的现有元素.
因此,使正常<button>行为像a mega-button一样简单,就像<button is="mega-button">为它附加和编写组件一样简单.但事实证明,extend多个元素是不可能的.所以类似的东西extends="foo bar"不起作用.如果我想构建一个可以实际应用于不同元素的Web组件,该怎么办？
例如,我不想只扩展<button>元素,mega-button但也可能只是元素,<a>以便它看起来像行为mega-button？
mixin方法在这里并没有真正帮助(据我所知),因为它们不再为不同的Web组件提供共享逻辑.这意味着,您可以创建多个组件,并从mixin重用逻辑(打包在mixin中).
我需要的是一种创建一个可以应用于多个元素的Web组件的方法.
知道如何解决这个问题吗？
UPDATE
Addy回答了一些处理该用例的方法.这是基于一种方法的后续问题
如何在Polymer中注册我自己的元素时,如何找出要扩展的元素
另一个是否有可能在Polymer中分享Web组件(和导入)中的mixin？
更新2
我写了一篇文章,总结了我对聚合物遗传和组成的经验和学习:http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/
我试图了解源DOM中的哪些事件通过<content>元素在shadow DOM中接收时的样子.我正在阅读Shadow DOM W3C草案,我并不完全理解它,但听起来事件要从EventListener附件的角度"重新定位".
在事件路径跨越多个节点树的情况下,调整事件关于事件目标的信息以维持封装.事件重定向是计算调度事件的节点的每个祖先的相对目标的过程.相对目标是在保持封装的同时最准确地表示给定祖先的调度事件的目标的节点.
和
在事件发送时:
- Event target和currentTarget属性必须返回调用事件侦听器的节点的相对目标
所以这里是一个简单的Polymer自定义元素,只是将其子元素放入容器中,并向容器添加一个ClickListener(在shadow DOM中).在这种情况下,孩子是一个按钮.
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body unresolved>
<polymer-element name="foo-bar">
<template>
<div id="internal-container" style="background-color:red; width:100%;">
<content></content>
</div>
</template>
<script>
Polymer("foo-bar", {
clickHandler: function(event) {
console.log(event);
var element = event.target;
while (element) {
console.log(element.tagName, element.id);
element = element.parentElement;
}
},
ready: function() {
this.shadowRoot.querySelector('#internal-container').addEventListener('click', this.clickHandler);
}
});
</script>
</polymer-element>
<foo-bar id="custom-element">
<button>Click me</button>
</foo-bar>
</body>
</html>
当我在Chrome 38.0.2075.0金丝雀上运行时,当我点击按钮时,我得到:
MouseEvent {dataTransfer: null, toElement: …我了解Chrome在Web组件要求方面正在变得完整.
这是否意味着不再需要聚合物？
Web组件是改变Web的下一个重要因素.
我很惊讶Web组件的强大功能,制作Web组件的最佳方法是Polymer.
学习聚合物的最佳资源是什么？我们可以将所有资源放在一起吗？
我有一个自定义 Polymer 元素，我想以某种方式设置样式，并将其作为插件提供给许多不同的网站。我希望能够封装我的自定义组件的样式，使它们在嵌入它们的所有网站上看起来都相同。以下是父网页的字体指令如何干扰我的组件样式的示例：
<style>
* {
font-size: 18px;
}
</style>
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="polymer-css-test">
<template>
<style>
:host {
font-size: 12px;
}
</style>
<div>
Please tell me how to make this 12pt.
</div>
</template>
<script>
Polymer('polymer-css-test', {
ready: function () {
}
});
</script>
</polymer-element>
<polymer-css-test></polymer-css-test>在此先感谢您的帮助。
我有一个聚合物元素,在其Javascript中我试图找到它的宽度和高度,因为它在DOM内.我尝试了很多方法,但我总是回来0.
假设我们有一些类似于动画CSS加载器的CSS代码,我们希望在所有使用Shadow DOM的Web组件中使用它们.如果我们无法像使用::shadow和那样刺穿Shadow DOM,我们如何重新使用这个CSS代码/deep/？
我们甚至无法<link />在阴影DOM中添加,所以目前我强制通过多个<style>标签复制代码.
我真的想知道这种用例的建议最佳实践是什么.
谢谢.
我是一名新开发人员,我很难找到能够清楚地识别Polyfill和Polymer之间差异的任何东西.
我很确定Polyfill是/或使用platform.js webcomponents.js的一部分,而webcomponents.js反过来又是大多数浏览器用来确保Web组件尚未完全支持的用途的一部分.而Polymer使用某种形式的模板,如Angular的指令,但它似乎是未来网络的一个更永久的固定装置.
任何人都可以提供更明确的定义或链接,以阐明两者之间的差异吗？
我已经开始尝试 webpack 和 webcomponents。到目前为止，我只在没有 webpack 的情况下运行了这个基本的 Web 组件示例。index.html如果我只是使用标签加载 Web 组件，<script>那么我就会得到渲染的内容。但是，当我尝试使用基本的 webpack 设置运行相同的示例时，我看不到渲染的模板。
服务器已成功启动，我可以看到控制台初始化消息。缺少什么步骤？我希望能够以这种方式连接它们。
我有以下文件：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Web Components App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<vs-app></vs-app>
</body>
</html>
主要.ts
module.hot && module.hot.accept();
// Components
import { App } from './app';
// Styles
require('./shared/scss/main.scss');
console.log('Initialise Main');
应用程序.ts
/**
* App
*/
export class App extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = this.template;
}
get template() …是否有任何 Vs Code 扩展可以在 JavaScript 字符串中突出显示 HTML？
具体来说，我正在编写 Web 组件
const html = content => `
<div>
<table>
${content}
</table>
</div>
`;
class BaseTable extends HTMLElement {
constructor() {
super();
}
set content(value) {
const template = document.createElement('template');
template.innerHTML = style + html(value);
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}我想突出显示 html 常量变量中的字符串
web-component ×10
polymer ×7
javascript ×3
css ×2
shadow-dom ×2
css3 ×1
ecmascript-6 ×1
html ×1
polyfills ×1
typescript ×1
webpack ×1