标签: web-component

它是如何/(或仅仅是"它？")可以创建一个Web组件,可以放在一个表单中,并像任何输入元素一样,在提交时发送到服务器？换句话说,Web组件可以用于创建自定义输入元素吗？

HTML Imports是Web Components规范的一部分,它提供了一种处理Web依赖关系的方法.ES6模块也做同样的事情,但仅适用于Javascript代码.

关于这两者如何协同工作是否有任何明确性？

编辑:一个例子:在我最近的一个项目中,我有两个Javascript组件(文件),其中一个依赖于另一个,但任何HTML代码(这是另一个组件)都可以使用它们中的任何一个.因此,当我在HTML中包含依赖脚本时,我也不想包含父脚本(避免手动依赖性处理).似乎没有明确的方法来实现它,除了将ES6模块与脚本包括混合.我看到的唯一选择是为每个组件维护一个单独的文件,并指定所需的文件和依赖项,例如component.io.

如何在聚合物中使用私有非静态变量？

在:

<polymer-element name="component-one">
   <script>

       Polymer('component-one', {
       internalState = 1,    
       ready() {
               this.anotherInternalState = 1;
           }
           /* more variables and functions */
      });

   </script>

</polymer-element>

internalState和anotherInernalState都暴露给外部(例如通过以下方式访问:

document.querySelector('component-one').internalState

(从外部更改internalState时可能不合需要使组件不稳定.)

如:

<polymer-element name="component-two">
   <script>

    (function() { 

       var internalState = 1;


       Polymer('component-two', {
          /* some variables and functions */
      });
    })();

   </script>

</polymer-element>

internalState在外部是隐藏的,但它是静态的,并在组件的所有实例之间共享.

有没有办法在聚合物对象中有一个私有的非静态变量？

阴影dom封装css样式,选择器不跨越阴影边界.

问题:如何在影子dom中使用全局常见的css样式？
(假设有一些常用的CSS样式将用于所有页面(例如:font-family,h1,h2,clear,reset ...),如何使它在阴影dom中工作？)

我已经定义了一个自定义元素,我只想在自定义元素升级到其注册类型时才执行脚本.用例是我必须调用自定义方法.

我的主要html文件如下所示:

<project-list></project-list>
<script>
    var project_list = document.getElementsByTagName("project-list")[0]
    project_list.custom_method("some_data");
</script>

自定义元素在HTML导入中注册,如下所示:

<script>
  "use strict";
  var currentScript = document._currentScript || document.currentScript;

  class ProjectList extends HTMLElement {

    createdCallback(){
      console.log("created");
    }

    custom_method(data) {
      console.log("custom_method() OK");
      console.log(data);

      this.innerHTML = data;
    }

  }

  document.registerElement("project-list", ProjectList);
</script>

我的问题很简单:如何确保主要html文件中的脚本仅在自定义元素获得其custom_method方法后才被调用？

我正在寻找一个优雅的解决方案.规范作者会想到的东西.我不介意更改架构(例如,如果有必要,可以将javascript从主文件移动到另一个自定义元素中).

有没有办法为组件的@绑定指定默认值.

我已经看到了如何使用指令执行此操作的说明:如何在Angular Directive Scope中设置默认值？

但组件不支持编译功能.

所以,我有这样的组件:

{
  name: 'myPad',
  bindings   : {layout: '@'}
}

我希望释放组件的用户必须指定'layout'属性的值.所以这:

<my-pad>...</my-pad>

而不是这个:

<my-pad layout="column">...</my-pad>

而且......这个'layout'属性应该被使用的角度材质JS所消耗,所以它需要在渲染DOM之前被绑定(所以材质JS可以拾取它并添加相应的类到元素).

更新,一些截图来澄清情况:

组件定义:

{
  name : 'workspacePad',
  config : {
    templateUrl: 'src/workspace/components/pad/template.html',
    controller : controller,
    bindings   : {
      actions: '<', actionTriggered: '&', workspaces: '<', title: '@',
      flex: '@', layout: '@'
    },
    transclude: {
      'workspaceContent': '?workspaceContent'
    }
  }
}

组件用法:

<workspace-pad flex layout="column" title="Survey List" actions="$ctrl.actions"
  action-triggered="$ctrl.performAction(action)">
  <workspace-content>
    <div flex style="padding-left: 20px; padding-right: 20px; ">
      <p>test test</p>
    </div>
  </workspace-content>
</workspace-pad>

我想在第二个屏幕截图(用法)选项中制作"flex"和"layout". …

我正在尝试在同一元素的实例之间同步我的一些Web组件属性,因此如果其中一个属性发生更改,则相同的属性将在具有相应绑定和事件的所有实例中更新.

注意:我想将Polymer Data System Concepts用于实例之间的通信.

例

我-element.html

<dom-module id="my-element">
  <script>
    Polymer({
      is: 'my-element',

      properties: {
        myProp: {
          type: String,
          notify: true
      }
    });
  </script>
</dom-module>

我 - 其他 - element.html

<dom-module id="my-other-element">
  <template>
    <my-element my-prop="{{otherProp}}"></my-element>
  </template>
  <script>
    Polymer({
      is: 'my-other-element',
      properties: {
        otherProp: {
          type: String,
          notify: true,
          readOnly: true
        }
      }
    })
  </script>
</dom-module>

我-app.html

<dom-module id="my-app">
  <template>
    <my-element id="element"></my-element>
    <my-other-element id="otherElement"
      on-other-prop-changed="onPropChanged"
    ></my-other-element>
  </template>
  <script>
    Polymer({
      is: 'my-app',

      attached: function () {
        // should set …

在新的 v1 Web 组件规范中，您可以用于:host定位自定义元素。但后来我将一个类附加A到自定义元素，并有一个 css 选择器:host.A，但它的样式没有被应用。有谁知道如何解决这一问题？

谢谢

关于这个话题似乎有很多过时的问题，我找不到最近的一个（2018）。另外，其他问题只是着眼于使之起作用，我着眼于使该工作遵循ES6模块关于HTML导入的道路的正确路径。

所有浏览器似乎都同意html导入已死

 <link rel="import" href="https://xyz.html">

如果是这样，是否有导入html的好方法

<template>

在JavaScript中使用？

我在这里找到了这个技巧- 创建和使用自定义HTML组件？，但它依赖于JavaScript文件中的HTML作为字符串。

在我的理想世界中，我可以定义一个HTML文件template.html（这样我就可以得到不错的编辑器颜色编码），但是能够导入该文件以在我的dom中使用。

我知道有像lit-html这样的库可以使此操作变得容易，但是似乎由于ES6模块现在是标准的，并且由于不推荐使用html导入来代替ES6模块，因此应该有一些简单的本地方法来做到这一点吗？

注意：这里和其他地方都存在现有问题，但它们都是特定于 jQuery 的，并且没有涵盖纯 JavaScript 的规范答案，包括对 Web 组件的支持。

我想模拟按 Tab 键，以便焦点转移到 Tab 键顺序中的下一个元素。下一个元素可以是任何 HTML 可聚焦的 HTML 元素或带有tabindex="0". 这也需要在某些后代 HTML 元素可能是具有影子 DOM 的自定义 Web 组件的情况下起作用。

潜在的解决方案可能是触发按键事件或迭代后代节点以寻找可聚焦的节点。