标签: web-component
Web 组件的行为有所不同，具体取决于是否使用“defer”
我在 TypeScript 中实现了一个 WebComponent，如下所示，并通过 WebPack 捆绑：
class MyTestComponent extends HTMLElement {
// ...
connectedCallback() {
this.config = JSON.parse(this.innerText);
// ...
customElements.define("my-test", MyTestComponent);
在网页中它的使用方式如下：
<my-test>
{
"parts": [
[3, "red"]
]
}
</my-test>
This worked fine using my WebPack genrated test page, but failed if I included the component into another page. I spend some time until I figured out that the defer attribute at the including script tag makes the difference. If I use defer the component works fine. If …
推荐指数
解决办法
查看次数
StencilJS - 如何从node_modules导入css/sass？
我正在尝试导入一个包含来自 node_modules 包的变量的 css 文件。
我尝试从 stencil.config.ts 进行复制，但它不断将构建转储到我尝试指定的位置，并且无法找到下一步的信息。
我现在拥有的是这样的：
type: "www",
dir: 'src/global',
copy: [
{ src: '../node_modules/package/design-tokens/dist/tokens.css', dest: 'themes' }
]
}
现在我只需要进入node_modules并引用一个包含变量的css文件。
谢谢你！
推荐指数
解决办法
查看次数
ResizeObserver 仅在 Web 组件添加到 DOM 时触发，而不是在调整大小时触发
我已经创建了一个 Web 组件，并尝试将 a 添加ResizeObserver到该元素。
ResizeObserver添加后，connectedCallback它似乎只在元素添加到 DOM 时触发一次，但在元素调整大小时不会再次触发。
我希望ResizeObserver当组件被其父元素强制调整大小时，将被触发。我已经检查并观察了开发人员工具中的元素大小，它确实调整了大小。
我还使用标准 HTML 元素（id：#foo）测试了相同的代码，并且回调有效。所以我只能假设问题与 Shadow DOM 有关。
\n规范说：
\n- \n
- 当观察元素被插入/从 DOM 中删除时，观察将会触发 \n
- 当观看的元素显示设置为无时，观察将触发。 \n
- 对于未替换的内联元素，不会触发观察。 \n
- CSS 转换不会触发观察。 \n
- 如果正在渲染 Element，并且 Element\xe2\x80\x99s 大小不为 0,0，则观察开始时将触发观察。 \n
我可以确认第一点发生了。
\n我预计第五点应该会发生，但它从来没有发生过。如果检查元素，它的大小不是 0,0 并且会随页面调整大小。
\n我已经浏览了 Web 组件的 MDN 文档和ResizeObserver许多其他网站，据我所知，我的一切都是正确的。
这是代码的 JSFiddle：\n https://jsfiddle.net/h15e48fx/1/
\n推荐指数
解决办法
查看次数
聚合物,样式禁用的Web组件
我最近一直在关注Polymer,但是当我想在常规样式表中重新disabled设置<paper-button>元素的状态时,我遇到了问题.
<paper-button disabled="disabled" ...>
#shadow-root
<script>
:host {...}
:host([disabled]) {
...I want to be able to overwrite styling here...
}
有人可以帮忙吗？我尝试了各种各样的::阴影,但我只是碰到了一堵砖墙:>
谢谢.
推荐指数
解决办法
查看次数
如何让 Google 字体（Varela Round）在 Polymer 1.1 Web 组件中工作？
题：
在聚合物 1.1 上下文中，我如何包含用于我的 dom 模块的外部字体（如 google 字体或 font-awesome）？
我知道现在聚合物倾向于使用样式模块。我也知道将字体预加载到 html 并将其导入我的 dom 模块的技术。但我仍然无法让它工作。
我的<circle-x></circle-x>组件的目标：
我的 dom 模块基本上为这些图像提供了圆圈，其<h1>下方已经设置了样式。然后在 flexbox 结构下根据有多少圆圈来响应式地布局它们。
我尝试过的（TLDR 版本）
我使用rel="import"了font.html样式模块，然后使用了我的<circle-x>组件，但不能使用样式字体（当我使用 sans-serif 时它有效），这意味着我选择了它。我还对它进行了谷歌检查，并在<circle-x>组件页面中加载了 google-font 样式表。
我试过的（细节）：
<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
- polymer.html
+ - webcomponentsjs
- webcomponents.js
在 Polymer 文件中，我注意到有一个名为 robots.html 的文件，因此我创建了一个类似的文件。
<!-- varela-round.html -->
<link rel="import" ref="https://fonts.googleapis.com/css?family=Varela+Round>
然后是 Typography.html 来引用 roberto.html
<!-- …推荐指数
解决办法
查看次数
带有聚合物纸张元素的最简单的HTML页面
如何创建使用Polymer Paper Elements的最简单的html页面？
我想有一个单独的html文件,从其他地方加载所有需要的库(CDN).例:
<!DOCTYPE html>
<html>
<head>
<title>Polymer Test</title>
</head>
<body>
<paper-button>hello world paper button</paper-button>
</body>
</html>
这显然不起作用,因为<paper-button>浏览器不知道.那么我需要包括什么才能使它适用于所有当前的浏览器？
是否可以自己下载任何库并且不得不将它们放在我的html文件旁边的web服务器上？
推荐指数
解决办法
查看次数
编写Web组件类的ES5方式是什么？
要定义自定义Web组件,我们可以扩展ES6类以访问元素的生命周期反应.
class HelloElement extends HTMLElement {
// Monitor the 'name' attribute for changes.
static get observedAttributes() {return ['name']; }
// Respond to attribute changes.
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'name') {
this.textContent = `Hello, ${newValue}`;
}
}
}
// Define the new element
customElements.define('hello-element', HelloElement);
ES5做同等对待的方式是什么？
推荐指数
解决办法
查看次数
Web 组件嵌套槽
有没有更好的方法将槽传递给深度嵌套的组件？
索引.html
<outer-comp>
<span slot=foo>Lorem ipsum</span>
</outer-comp>
外部组件：
<inner-comp>
<slot name=foo slot=foo></slot>
</inner-comp>
内部组件：
<slot name=foo></slot>
web-component shadow-dom custom-element native-web-component
推荐指数
解决办法
查看次数
stenciljs手表装饰器不触发
我试图将JSON字符串传递给组件prop，然后让组件将字符串解析为javascript对象。
不幸的是@Watch装饰器没有触发 ...我做错了什么？我遵循了以下文档：https : //stenciljs.com/docs/reactive-data#watch-decorator
这是我的代码的相关部分：
ptw-input.tsx
import { Component, Prop, Watch } from "@stencil/core";
@Component({
tag: "ptw-input",
styleUrl: "ptw-input.css",
shadow: true
})
export class PtwInput {
@Prop() data: string;
innerData: any;
@Watch('data')
watchHandler(newValue: string): void {
this.innerData = JSON.parse(newValue);
console.log('this.innerData', this.innerData);
}
render(): JSX.Element {
return (
<input type="text"
placeholder={this.innerData.placeholder}
disabled={this.innerData.disabled}
maxlength={this.innerData.maxlength}
);
}
}
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/ptw.js"></script>
</head>
<body>
<ptw-input data='{"placeholder":"Type something", "disabled":false, "maxlength":4}'></ptw-input> …推荐指数
解决办法
查看次数
阴影dom内部的脚本不起作用
我已经创建并导出了一个Angular Element（Angular中的Web组件）作为单个脚本标签（user-poll.js）。要使用此Angular元素，我只需要在宿主站点中指定以下两行：
<user-poll></user-poll>
<script src="path/to/user-poll.js"></script>
我有以下要求：
- 在外部站点上加载多个Angular Elements。
- 动态加载所有角度元素
我有以下问题：
- 在站点上加载多个组件会导致Angular冲突，因为每个组件脚本本身就是一个完整的Angular应用。
- 为了解决冲突问题，我将每个组件加载到单独的Shadow Dom组件中（即，在shadow dom容器内添加组件标签和组件脚本文件链接），以便对每个组件进行沙盒处理。但是影子dom内部的组件脚本不起作用。
<body>
</body>
setTimeout(() => {
loadJS();
}, 2000);
function loadJS() {
var elm = document.createElement("div");
elm.attachShadow({mode: "open"});
elm.shadowRoot.innerHTML = `<user-poll><h2>Custom Web Component - user-poll loaded</h2><script src="https://cdn.rawgit.com/SaurabhLpRocks/795f67f8dc9652e5f119bd6060b58265/raw/d5490627b623f09c84cfecbd3d2bb8e09c743ed4/user-poll.js"><\/\script></user-poll>`;
document.body.appendChild(elm);
}
那么，在站点上动态加载多个Angular Elements的最佳方法是什么？
javascript web-component shadow-dom angular angular-elements
推荐指数
解决办法
查看次数
标签 统计
web-component ×10
javascript ×5
polymer ×3
shadow-dom ×2
stenciljs ×2
typescript ×2
angular ×1
callback ×1
css ×1
ecmascript-6 ×1
polyfills ×1
polymer-1.0 ×1
resize ×1