问题标签 [web-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
13087 浏览

javascript - Dynamically load Web Components / HTML Imports?

How would you go about dynamically loading a web component - in response to a url route change for example?

I won't know the requested component ahead of time, so could you simply use JavaScript to write the HTML import and then add the code to the page, or are there implications with this? Perhaps Google Polymer helps?

0 投票
1 回答
877 浏览

javascript - 自定义元素中的脚本标签

我正在使用使用 Google Map 的 api 的 Polymer 创建一个自定义元素。我希望这个元素负责包含谷歌地图的脚本标签。

这在自定义元素中应该放在哪里?简单地将其放在页面顶部会引发跨域问题。

0 投票
1 回答
424 浏览

dart - 使用 Polymer.dart 从动态添加的自定义元素内部操作阴影 DOM

这个最小的聚合物应用程序有一个包含“曲目”的“浏览器”。浏览器需要能够调用render其轨道。当轨道渲染时,它会<p>向它的影子 DOM 添加一个新节点。

就目前而言,render被调用,创建了 ParagraphElement 并且没有任何麻烦地找到父级“div#insert-here”,但是将新创建的 ParagraphElement 添加到 div 的子级不会在浏览器中呈现。

如果我们更改代码以在enteredView 期间<p>ExampleBrowser 的shadow dom 中插入一个新的,<p>则会按预期出现在浏览器中。为什么它适用于顶级自定义元素,而不适用于动态创建的自定义元素?

错误测试.dart

自定义元素.html

索引.html

0 投票
1 回答
17825 浏览

javascript - Polymer 和 WebComponentsReady 事件

根据Polymer 文档,该WebComponentsReady事件是必要的,因为...

polyfill 解析元素定义并异步处理它们的升级。如果您在 DOM 有机会升级之前过早地从 DOM 中获取元素,您将使用 HTMLUnknownElement。在这些情况下,在与元素交互之前等待 WebComponentsReady 事件

我有一个 HTML 页面,它导入单个 Web 组件并注册一个处理程序,该处理程序在加载所有 Web 组件时记录一条语句:

为什么事件在 my-element 的聚合物事件WebComponentsReady之前触发?ready我需要知道何时可以与自定义元素交互,例如更改其属性并调用其公共方法。

0 投票
1 回答
1154 浏览

css - Shadow DOM:仅当宿主元素为时如何应用 CSS 样式?

如果它是元素的直接子元素,我必须对我的 Web 组件应用特殊的 CSS 样式<body>。这是我迄今为止尝试过的:

浏览器:Chrome 稳定版 (32.0.1700.107)、Chrome Canary (34.0.1843.3)。

0 投票
1 回答
186 浏览

polymer - 如何在自定义元素中将周围页面的样式用于链接?

我有一个自定义<my-header>元素,它在 shadow dom 中生成一个链接,我希望它的样式与周围页面中的其他链接相同。旧applyAuthorStyles属性是一个不错的方法来实现这一点,尽管它有自己的问题。现在applyAuthorStyles已删除,我看到的选项是让嵌入器将其全局样式定义为:

以此类推,侵入了不想要页面样式的元素的样式。

有一个更好的方法吗?

我在http://jsbin.com/yusox/1/edit及以下有一些示例代码。如果您的浏览器打开了本机 Shadow DOM(Chrome 中的 chrome://flags/#enable-experimental-web-platform-features),您只会看到不一致的情况。

0 投票
2 回答
606 浏览

css-selectors - 我如何编写在大多数孩子之后*选择特定元素的影子 dom?

我正在编写一个类似自定义<figure>的元素,我想<figcaption>在主要内容下放置一个。<figcaption>需要包含来自自定义元素的子节点的一些内容(具有潜在格式的文本),我正在为此使用<content select="span.caption"></content>. 但是,根据Shadow DOM 规范<span>已经分发到<content></content>布局自定义元素主体的较早元素。

我尝试使用<content select=":not(span.caption)"></content>来避免分发标题,但这似乎不是复合选择器并且不匹配任何内容。

让元素按我想要的顺序呈现的推荐方法是什么?

这是有问题的代码,也位于http://jsbin.com/vizoqusu/3/edit

0 投票
1 回答
185 浏览

less - Less 是否支持自定义元素?

Less 是否支持 Web 组件自定义元素规范?(http://w3c.github.io/webcomponents/spec/custom/或更易于访问的http://www.x-tags.org/docs

0 投票
2 回答
418 浏览

javascript - HTML 自定义标签不起作用

我正在尝试实现此站点的功能。但是当我单击 x-foo 元素时,我的代码没有发出任何警报。这是我的代码:

有什么建议么?(我在 Chrome 上)

0 投票
1 回答
1115 浏览

javascript - 尝试在 3rd 方站点上呈现 Polymer 元素时出现跨域问题

所以我正在为我们的服务做一个嵌入式小部件之类的事情,它提供了一个<script src="http://our-awesome-service.com/scripts/widget.js"></script>用户可以获取并嵌入到他们自己的网站、博客等的字符串,我遇到了一个问题,即在尝试使用脚本附加<link rel="import" href="http://our-awesome-service.com/templates/widget.html">HTML 导入时以编程方式在用户的站点(例如http://user-blog.com)上,浏览器将显示一个 access-control-allow-origin 错误,说明http://user-blog.com无法访问http://our- awesome-service.com/templates/widget.html

我该如何处理这种情况?是否可以只为这个特定的 HTML 文件打开 CORS?