标签: web-component

我正在考虑在我的移动网络应用程序上集成Web组件/聚合物.

这里有两个性能主要瓶颈(我认为):

1. Polymer的"platform.js"大小为163KB(44KB GZipped).这对移动3G网络来说非常重要.Polymer声称他们的主要目标是性能,而同时,Google的最佳性能实践是首先以最少的网络请求(1个请求？)加载移动应用程序的关键路径+最小化此请求大小.如果我只想使用Polymer加载非关键组件,我可以使用异步脚本加载模式.如果不是这种情况,我将被迫等待加载此脚本,直到页面可以开始渲染.

2. Web组件大量使用html导入,后者使用其他网络请求.在这里,我发现了两个可能的解决方案(1,2)

我唯一的结论是,Web组件和聚合物还没有为(移动)生产做好准备(？)

我创建了一个名为"memory-box"的自定义元素,如下面的代码所示.
请注意"memory-box-template"中的"logthis"功能.

内存box.html

<template id="memory-box-template">
    <input id="memory-box" type="form" />
    <input type="button" id="testbutton" />
    <script type="text/javascript">
    function logthis(me){
        console.log(me);
    }    
    </script>
</template>

<script type="text/javascript">
    (function() {
        var thisDoc = document.currentScript.ownerDocument;
        var storage = localStorage;

        var proto = Object.create(HTMLElement.prototype, {
            createdCallback: {
                value: function() {                
                    var temp = thisDoc.querySelector('#memory-box-template');
                    var con = document.importNode(temp.content, true);
                    this.createShadowRoot().appendChild(con);
                    var input = this.querySelector('::shadow #memory-box');
                    var data = storage.getItem(this.id);
                    input.value = data;
                    input.addEventListener('input', saveData.bind(input, this.id));
                }
            },
        });

        document.registerElement('memory-box', {
            prototype: proto
        });

        function saveData(id, e) { …

我正在使用Web Components并尝试将click事件绑定到Shadow DOM内部的元素.

1. component.html包含<link rel="import" ...>在index.html内部

<template id="my-element">
    <section>
        <header>
            <content select="h1"></content>
            <button></button>
        </header>
        <content select="div"></content>
    </section>
</template>

2.后期元素用法:

<my-element>
    <h1>Headline</h1>
    <div>...</div>
</my-element>

3.访问元素并将函数绑定到它

现在我想在我的内部添加一个(不幸的是隐藏了).喜欢:addEventListener()<button><my-element> #shadow-root

var elemBtn = document.querySelector('my-element button');
elemBtn.addEventListener('click', function(event) {
    // do stuff
});

但那不行.我如何实现这一目标？

题:

在这个Plunk中,我想导入Polymer 1.0元素<paper-button>和<paper-menu>.

我怎么做？

换句话说,什么是正确的一组<script>和<link>标签及其各自src和href属性,以使我<paper-button>和<paper-menu>元素正常运作？

尝试:

在右边距中,有一个搜索和导入外部库的选项.我用它来搜索Polymer 1.0,我导入了以下内容.

<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>

注意:这是一个导入Polymer元素的JS Bin.

我想知道是否有一种方法可以获取模板标记中元素的内容并将其作为字符串返回？目前，似乎正在沿线返回一些[object document fragment]内容，但只需要其中的html内容。

function CreateWidget(widget) {
    //Check if browser supports templates
    if ('content' in document.createElement('template')) {
        //Grab the template's content and assign it to a variable so we only have the gut of the template
        var widgetContent = document.querySelector('#panel-template').content //('#panel-template').get(1).setAttribute('id', widget.WidgetCode);
        widgetContent.querySelector('#chart').setAttribute('id', widget.WidgetCode);

        //get the overlay toolbar
        var widgetOverlay = widgetContent.querySelector('.overlayed');
        widgetOverlay.setAttribute('data-render', widget.WidgetCode);
        widgetOverlay.setAttribute('data-chartType', widget.chartType);
        widgetOverlay.setAttribute('data-devID', widget.deviceID);
        widgetOverlay.setAttribute('data-metricType', widget.metricType);
        widgetOverlay.setAttribute('data-title', widget.WidgetName);

        var el = document.importNode(widgetContent, true);
        alert(el);   
    }
}

我正在尝试在我的Angular 2组件中声明的元素上调用函数.问题是我不知道如何从我的JS代码中检索元素.如果我可以将元素从模板传递给JS代码,它可以工作,但使用document.querySelector不会返回任何内容.

示例代码(plunk):

@View({
  template: `
    <div>
      <span id="p1">{{name}}</span>
      <span #p2>{{name}}</span>
    </div>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class Person {
  sayHello(e) {
    p1 = document.querySelector('p1');
    console.log('p1:', p1)
    p2 = document.querySelector('p2');
    console.log('p2:', p2)

    alert('VanillaId: ' + (p1 ? p1.innerHTML : 'null') +
          '\nAngularId: ' + (p2 ? p2.innerHTML : 'null'));
  }
}

我怀疑它与阴影dom有关,但我不知道如何获取阴影根并使用它来进行查询.this似乎没有暴露任何有用的访问dom.

我是网络组件的新手.我检查了一些例子,但我真的无法弄清楚如何加载(插入DOM)一个单独的Web组件的内容.从这个例子开始,我把这段代码放在一个名为my-element.html的文件中:

<template id="my-element">
  <p>Yes, it works!</p>
</template>
<script>
    document.registerElement('my-element', class extends HTMLElement {
      constructor() {
      super(); 
      let shadowRoot = this.attachShadow({mode: 'open'});
      const t = document.querySelector('#my-element');
      const instance = t.content.cloneNode(true);
      shadowRoot.appendChild(instance);
    }
});
</script>

这是我的index.html:

<!doctype html> 
<html>
 <head>
   <meta charset="utf-8">
   <title>my titile</title>
   <link rel="import" href="my-element.html">
</head>
<body>
  Does it work?
  <my-element></my-element>
</body>
</html>

我在使用最新的Chrome 56,所以我不需要填充.我运行polyserve,只有"它有效吗？" 出现.我尝试(像原始示例)"customElements.define"语法而不是"document.registerElement",但不起作用.你有什么想法吗？如果我不想使用影子dom,我还能改变什么？

谢谢

我有一个聊天窗口小部件，我想将其嵌入其他人的网站。看起来就像对讲机和所有其他聊天弹出窗口。无论滚动到何处，我都希望使聊天弹出窗口停留在屏幕的右下角。但是，当我将聊天应用程序导入为iframe并提供给iframe时position: fixed; bottom: 0px; right: 15px;，iframe不会到达我期望的位置。

我意识到iframe对于嵌入式JS小部件而言不是最佳选择，所有最好的嵌入式应用程序都从文件存储中导入.js文件。在网上搜索了几个小时之后，我还没有找到关于如何制作那些挂接到a并呈现小部件的JS文件的解释/教程。您甚至怎么做那些纯JavaScript应用之一，它们又叫什么？（我假设不是Web组件，因为已经有很长时间的小部件了）。

抱歉，这个问题有点儿菜鸟。在我自己尝试实现之前，我从来不知道这是一回事。任何人都可以向我指出如何开始制作JS网络小部件的正确方向？谢谢！（也许ReactJS到VanillaJS转换器会超级酷）

是否可以注销由createCustomElement创建的自定义元素？

我们使用Web组件包装垂直功能，在将Web组件添加到DOM之前，先下载功能的所有“部分”。

我们真正想要的是在该功能不再活动但看上去好像没有可用的API时完全销毁该组件。

有人有运气吗？

我什么时候可以使用querySelector的shadwoRoot？

我在中尝试过connectedCallback，但失败了。