我有一组纸按钮，如下所示：
<div><paper-button id="100" on-tap="addQuantity">100ML</paper-button><paper-button toggles id="200" on-click="addQuantity">200ML</paper-button><paper-button toggles id="300" on-click="addQuantity">300ML</paper-button></div>addQuantity:function(e)
{
console.log(e.target.id);
}如何解决这个问题？
您好我在Chrome和Opera上有一个有效的Polymer 1.0网页.现在我需要在Firefox和Safari中运行该页面.我有以下测试:
<!DOCTYPE html>
<html>
<head>
<?php use Cake\Routing\Router; ?>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<dom-module id="test-element">
<template >
<h1>It works</h1>
</template>
<script>
Polymer({
is: "test-element"
});
</script>
</dom-module>
</head>
<body unresolved>
<test-element></test-element>
</body>
</html>
我试过改变
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
至
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
要么
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>
我认为webcomponents的Polyfill会处理html导入.但它不起作用.在Firefox中我收到以下错误:
ReferenceError: Polymer is not defined
我无法用Safari测试它,但我期望得到类似的结果.
我做错了吗？我该怎么做才能做到这一点？
此外,我尝试删除webcomponents并运行bower更新再次安装它们.
谢谢
编辑:
我有两个文件.index.html的:
<!DOCTYPE html>
<html>
<head>
<?php use Cake\Routing\Router; ?>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
<link rel="import" …我正在开发一个使用 HTML 5 本机 Web 组件的 Web 应用程序。我的问题是我有很多用于所有这些的通用 CSS，并且我使用了很棒的字体来制作漂亮的图标。现在我将所有样式都放在“/deep”阴影穿孔中，但 Chrome 说：“/deep/ 组合器已弃用。” 您对如何在整个应用程序上使用全局 CSS 和 CSS 库（如字体真棒）有什么建议吗？
谢谢 ：）
我正在研究构建香草网络组件.我以前使用过Polymer,你可以将模板,样式和JavaScript放在一个文件中.如果可能的话,我希望用'vanilla'网页组件实现这一目标,但无法解决问题.我从这里获取代码并将其添加到我正在使用的文件中,如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Component test</title>
<link rel="import" href="x-foo-from-template.html">
</head>
<body>
<x-foo-from-template></x-foo-from-template>
</body>
</html>
这失败了,因为当我们尝试选择模板时它不存在,因为此时模板不在DOM中(对吗？).
有没有办法实现这个目标？我个人更喜欢这种方法在JavaScript中使用创建HTML document.createElement.
javascript web-component html5-template custom-element html5-import
我试图通过创建 localForage 的全局实例来为纯形式的Web 组件添加localForage支持：
// create a global appStorage object that mimics localStorage API (greater storage)
window.appStorage = localforage.createInstance({
driver: [
localforage.INDEXEDDB,
localforage.WEBSQL,
localforage.LOCALSTORAGE
],
name: 'product-name',
version: 1.0,
storeName: 'app'
});
并通过storage属性将其分配给纯形式的实例：
<pure-form src="path-to-schema.json" storage="appStorage"></pure-form>
在内部， pure-form 执行window[self.storage]以获取存储对象的句柄并使用.getItem,.setItem同步设置和检索值。
麻烦的是localForage是异步的，也就是说.getItem，.setItem希望通过回调返回值。因此，我当前的逻辑将不起作用：
// get value from web storage
var storedContent = window[self.storage].getItem('item-key');
我意识到我可以将调用包装在 Promise 中，但就其而言，纯形式不需要承诺，我不想为此添加该依赖项。
我想做的是检查是否.getItem或.setItem需要回调，如果是，则相应地修改代码...
创建带有 shadow dom 的自定义元素并设置元素的 innerHTML 时，它不会显示。为什么？有没有办法防止这种情况发生？
//JS代码
export default class VideoPlayer extends DomElement {
constructor() {
super();
const mountPoint = document.createElement('div');
this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
}
}
window.customElements.define('video-player', VideoPlayer);
//HTML代码
<video-player>Why is this text hidden?</video-player>
javascript innerhtml web-component shadow-dom custom-element
我想让我的标题背景颜色透明。我的 HTML 如下：
帐户.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
<ion-title>Account</ion-title>
</ion-toolbar>
</ion-header>
账户.page.scss
ion-header {
--ion-toolbar-background-color: rgba(0, 0, 0, 0);
}
这使得 bg 颜色为白色，而不是透明。我还尝试background: transparent通过 Chrome Inspector 对每个元素进行设置。但我只是得到white.
任何帮助如何实现这一目标？
我已按照此处的指南使用纯JS / HTML / CSS创建了一个本地自定义元素作为Web组件。
现在我想知道如何为这种组件编写单元测试。有一个出色的库Web组件测试器，但我相信它仅适用于用聚合物创建的组件。
由于我的组件不是聚合物纤维网组件，而是天然的组件，因此有人可以为我指明进行单元测试的正确方向。
javascript web-component custom-element web-component-tester native-web-component
我最近创建了一个在所有浏览器中运行良好的原生 Web 组件。我将此 Web 组件移动到 Angular 6 应用程序中，并且一切正常。然后我尝试扩展一个原生 HTML 元素，该元素再次完美运行，除非我将它带入我的 Angular 6 应用程序。
使用 Mozilla 的示例，我将尝试说明我的问题。使用以下尝试扩展本机“p”元素：
// Create a class for the element
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();
// count words in element's parent element
var wcParent = this.parentNode;
function countWords(node){
var text = node.innerText || node.textContent
return text.split(/\s+/g).length;
}
var count = 'Words: ' + countWords(wcParent);
// Create a shadow root
var shadow = this.attachShadow({mode: 'open'});
// Create text …我有一个传统的 ASP.NET MVC 网站，它使用 Metronic Bootstrap 模板。
现在，我正在考虑使用 vanilla web components 方法重写这个网站。
所以我做了一个小测试，写了一个没有shadow dom的web组件，看起来我的组件只是使用了Metronic风格，所以它从我包含它的父页面继承了它。
但是，当我启用 shadow DOM 时，CSS 传播停止，现在我的 Web 组件不再使用 Metronic 样式。
目前我对如何处理这种情况有点不确定：我不能简单地使用 shadow DOM，但是，我没有使用 web 组件的全部强度和封装。
那么，如果您有一个大型 Bootstrap 模板要与 Web 组件结合使用，您将如何处理？这值得么？是否有针对这种情况的指导方针？
web-component ×10
javascript ×6
css ×3
html ×2
polymer ×2
shadow-dom ×2
angular6 ×1
asp.net ×1
firefox ×1
html-imports ×1
html5-import ×1
innerhtml ×1
ionic4 ×1
localforage ×1
polyfills ×1
polymer-1.0 ×1