标签: web-component

您将如何动态加载Web组件 - 例如,响应URL路由更改？

我不会提前知道所请求的组件,所以你可以简单地使用JavaScript来编写HTML导入,然后将代码添加到页面中,或者是否有这样的含义？Google Polymer可能有帮助吗？

我在HTML5中制作了一个模板,该模板与Chrome和Firefox一起使用,但没有使用Internet Explorer(在IE 8上测试过).

我怎么解决这个问题？

我没有看到官方的Polymer Datepicker组件.快速Web搜索产生以下第三方组件.以下线程之一有一些有趣的花絮.我们可以期待未来几周的正式会员吗？

• 聚合物日期选择器
• 这个帖子提示材料设计日期选择器
• 与此线程也显示了几个日期选择器
  • 日历Datepicker
  • 聚合物日期时间选择器
  • 纸张Datepicker
  • 纸质日历

我正在学习带阴影根的Web组件,如果可以通过开箱即用的代码加载外部样式表,似乎无法在谷歌上找到它？我还没有使用聚合物或任何其他Web组件库(还).代码如下:

<script src="../../libs/jquery-2.1.1.min.js"></script>
<script>
    var hollaProto = Object.create(HTMLElement.prototype);
    hollaProto.createdCallback = function () {
        var shadow = this.createShadowRoot();
        var content = document.querySelector('link[rel=import]').import.querySelector("div");

        $("button[data-command=holla]", content).on("click", function () { alert("Holla!"); });

        shadow.appendChild(content);
    };
    var hollaWidget = document.registerElement("holla-back", {
        prototype: hollaProto
    });
</script>
<div class="holla-back">
    <button data-command="holla">Holla!</button>
</div>

如果我将我的链接标记放在第一个脚本标记之上,我将整个网络时代设置为样式,而不是Web组件.

如果我把它放在它下面div.holla-back没有任何风格.

如何将外部样式表与Web组件一起使用？

如果我有一个自定义riot标签,p其中包含:

<custom>
  <p>This is a text</p>
</custom>

如何<p>从<custom>标签内访问元素？

更新:我收到了一大堆答案,可以从DOM中选择它.我想要的是一种p从组件库 riot.js本身中选择内部标签的方法.我正在寻找更具骚动的具体答案.例如用聚合物使用this.$.content.getDistributedNodes().

我需要从Shadow DOM获取元素并进行更改.我怎么能这样做？

<div>
     <input type="range" min="100 $" max="3000 $">
</div>

我正在尝试升级Angular1组件并在我的Angular2应用程序中使用它遵循"使用Angular 2 Code中的Angular 1组件指令"中的官方Angular2文档,但它会出现以下错误:

error_handler.js:54 TypeError: Cannot read property 'get' of undefined
    at ChartDirective.UpgradeComponent (upgrade_component.js:97)

在第97行仔细检查后,这个.$检查员未定义:

我的代码非常简单:

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

export const coolComponent = {
  template: 'cool',
  controller: function() {
  }
};

@Directive({
    selector: 'app-chart'
})
export class ChartDirective extends UpgradeComponent {

    constructor(elementRef: ElementRef, injector: Injector) {
        super('coolComponent', elementRef, injector);
    }
}

我自己的主要内容是:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

以下是问题的简化版本,只需极少的复制步骤: …

已经有一段时间聚合物版本2可用了,但是

• 很少有人谈论它
• 很少有开发人员在他们的博客中写到这一点
• 很少有开发者分享他们的工作流程和经验

Polymer Project由Google提供支持,团队似乎拥有无可挑剔的理念.

除了缺乏浏览器支持,Polyfills仍然可以正常工作.

顺便说一句,虽然Web组件是Web的标准,但似乎人们不喜欢打开它并继续工作.

对我来说有一个很大的原因,应该有一个解释.

这是我认为与Stackoverflow有关然而我知道很多人不会喜欢这样的问题.

<self-closing /> HTML自定义元素中不允许使用标记.

那是为什么？

很多情况下只需要void标签,我猜想,代码会更具可读性.另一方面,它更直接地暗示语义.

就像<hr />,代码本身意味着里面不应该有任何孩子,因为那里没有地方.此外,它与儿童无关.

自定义元素不能自动关闭,因为HTML只允许一些元素自动关闭.(了解更多)

我一直在阅读一些关于Web组件的教程(本机,没有聚合物).我已经看到了两种注册组件的方法,我对使用什么感到困惑.对于第二个,我实际上在vscode中收到了一个打字稿错误:[ts] Property 'registerElement' does not exist on type 'Document'. Did you mean 'createElement'?

/**
 * App
 */
export class App extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = this.template;
    }

    get template() {
        return `
        <div>This is a div</div>
        `;
    }
}

// What is the difference between these two methods?
window.customElements.define('vs-app', App);
document.registerElement('vs-app', App);