标签: web-component

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

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

我没有看到官方的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组件一起使用？

我正在使用v1.5组件,基本上(据我的理解扩展)最佳实践指令的包装器.

有关1.5版本组件的更多信息,请访问:http://toddmotto.com/exploring-the-angular-1-5-component-method/

我有以下内容:

<span>Correclty showing: {{ data.type }}</span>
<book class="details" type="data.type"></book>

它的组件定义:

angular
.module('app')
.component('book', {
    bindings: {
        type: '='
    },
    template: function($element, $attrs) {
        // Have tried A):
        // console.log($attrs.type); // <- undefined

        // And B):
        $attrs.$observe('type', function(value) {
            console.log(value); // <- undefined
        });

        // But.. C):
        return "This works though {{ book.type }}"; // <- renders
    }
});

无论A)和B)变化返回undefined.C)正确渲染.

有没有办法在返回模板字符串之前访问模板函数中的属性？

我正在尝试升级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);

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

我有一个简单的Web组件,遵循最新的Web组件v1类语法,它在Chrome和Firefox/Edge(带有polyfill)中运行良好,但我希望它在IE11中运行,所以我需要转换类.然而,通过babel运行它会生成不再适用于任何浏览器的代码.

有没有办法用类语法生成向后兼容的Web组件,还是有一种首选方法来编写Web组件以实现最大兼容性？

示例代码 -

class TestElement extends HTMLElement {
  connectedCallback(){
    this.innerHTML = "<div>Testing</div>"
  }
}

customElements.define('test-element', TestElement)

使用转换代码时出现错误信息是 -

未捕获TypeError:无法构造'HTMLElement':请使用'new'运算符,此DOM对象构造函数不能作为函数调用.

已经有一段时间聚合物版本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);

我正在寻找布局我们的新网络组件的结构,我目前还不确定我是否找到了一个工具,它可以完成我们理想的所有工作,或者非常接近,但看起来它是公平的现在常想做的事情.

我们有一个运行Java服务器端的Web应用程序,而客户端我们大量使用JavaScript和SASS等.我们希望重新构建我们的一些代码库,并组合我们的动态页面内容的某些方面.

例如,我们希望有一个标准的表组件,可以完全独立于完整的Web应用程序开发.我看到表组件有以下3个核心文件:

• table.js
• table.scss(我们编译成CSS文件的SASS文件)
• table.tmpl(我们最终编译成JS函数的模板文件,例如使用Handlebars作为模板引擎)

然后帮助发展:

• table-test.html(包含一些虚拟数据的测试页)
• table-qunit.js(Qunit测试)

然后希望将所有这些文件编译成以下内容:

• components.js - table.js和table.tmpl编译和缩小,然后用所有其他组件拉入一些更大的JS文件
• components.css - table.scss已编译和压缩,并与所有其他组件CSS合并

我看过的工具:

• requireJS - 似乎非常关注JS依赖管理,对资源文件有一些想法,但找不到任何关于它的使用和像SASS这样的CSS预处理器.我确实喜欢AMD JS依赖管理的想法.
• Grunt - 一个节点包,可以完成我们想要的一些工作
• 链接 - Ruby实现类似于我们想要的东西
• Javascript Maven插件 - 最接近语言/库(我们已经使用Java和Maven)但是,似乎只考虑JavaScript依赖管理而不是CSS,或者至少是SASS资源文件.

有没有人比上面的建议有更好的建议？什么东西更接近我们正在寻找的东西？理想情况下,不需要Node.js或Ruby的东西会更好......