标签: web-component

我正在做这个路由器教程.

我的App.jsx文件:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
render() {
  return (
     <div>
        <ul>
           <li>Home</Link>
           <li>About</Link>
           <li>Contact</Link>
        </ul>

       {this.props.children}
     </div>
  )
 }
}

export default App;

class Home extends React.Component {
render() {
  return (
     <div>
        <h1>Home...</h1>
     </div>
  )
 }
}

export default Home;

class About extends React.Component {
render() {
  return (
     <div>
        <h1>About...</h1>
     </div>
  )
 }
}

export default About; …

目标:一个封闭的小部件

假设我是FakeBook™的朋友小部件的开发者.我为网站所有者提供了一个小部件,可以将这样的个性化消息添加到他们的页面:

你的朋友Michael,Anna和Shirley喜欢这个网页!

第一种方法:创建的脚本 span

天真地,我创建了一个脚本,将这些信息span放在网站上.但是,ExampleSite的所有者现在可以通过简单的DOM操作访问您朋友的名字!
这是一个很大的隐私/安全问题.

第二种方法: iframe

我不希望ExampleSite访问他们朋友的名字.所以相反,我让网站所有者添加小部件iframe:

<iframe src="http://fakebook.com/friends?page=http%3A%2F%2Fexample.org%2F"></iframe>

这样做,因为ExampleSite的所有者无法刮掉内容iframe.然而,整个iframe事情相当丑陋,因为它没有融入网站的样式,而一个span.

期望的方法:Shadow DOM

在昨天阅读Shadow Dom时,我想知道这是否可以解决这两个问题.这将允许我有一个脚本,创建一个span原始网站无法访问:

var host = document.querySelector('#friends');
var root = host.webkitCreateShadowRoot();
root.textContent = 'Your friends Michael, Anna and Shirley love this webpage!';

但是,Shadow DOM是否会将其内容隐藏在周围的页面中？
这里的假设是除了我的脚本之外没有人可以访问root,但这是正确的吗？

在影子DOM规范毕竟说,它提供的功能封装,但其实我是想相信封装.虽然组件模型用例实际列出了这个用例,但我不确定Shadow DOM是否实现了nesessary confinement属性.

使用Web组件规范,是否可以扩展特定类型的<input>元素？

这个问题类似于我的问题,但它只指定了如何扩展button元素,而不是文本输入或<input>标记的任何其他变体.

在我的情况下,我想扩展一个checkbox(<input type="checkbox" />)或一个单选按钮(<input type="radio" />),以便围绕相同的核心输入元素功能包装更复杂的UI,但我没有看到任何方法使用extends提供的语法通过document.registerElement.在我看来,你应该能够做如下的事情:

document.registerElement('x-checkbox', {
    prototype: Object.create(HTMLInputElement.prototype),
    extends: 'input[type=checkbox]'
});

但是,这个特定的案例似乎没有记录或解释我能找到的任何地方,而且我相信这个例子在实践中不起作用.

我正在使用Polymer 2开发一个Web组件,并且希望使用第三方JavaScript库,该库不是专门为Web组件设计的.据我所知,唯一的方法是<script>在我的Web组件的HTML文件中包含引用该库的标记.

我可以看到这样做的几个问题,并想知道是否有任何解决方法,实际上是否以这种方式包含第三方库被认为是不好的做法.

1. 外部库可能设置全局变量,这些变量对页面上的其他组件可见,允许Web组件相互分离,或者破坏它们所托管的页面.由于封装经常被吹捧为使用Web组件的一大优势,这似乎是一个问题.

2. 外部库可能执行DOM查询或更新,这些查询或更新无法访问正在使用它们的Web组件的影子,因此外部库可能根本不工作,或者可能再次更新托管页面的DOM,从而破坏封装.

所以,我错过了什么或这是否意味着在Web组件中包含外部库是一个非常糟糕的主意？如果是这样,这似乎是这项技术的一个巨大限制,因为我们无法利用大量已有的JS库.

在开发Vue Web组件时,style它不会应用于Web组件,而是添加到head文档的组件中.这意味着在DOM DOM中忽略该样式.以下是我在main.js中包装Web组件的方法:

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/MyWebComponent';

const WrappedElement = wrap(Vue, MyWebComponent);

window.customElements.define('my-web-component', WrappedElement);

同样,样式标记内的任何CSS规则都不会生效.

当我为生产构建时,样式将添加到Web组件中.我使用以下命令进行包装:

vue-cli-service build  --target wc --name my-web-component ./src/components/MyWebComponent.vue

有没有办法实现同样的目的vue-cli-service serve？

编辑:示例repo:https://github.com/snirp/vue-web-component

edit2:我觉得我的问题与这个问题密切相关.我无法理解变通方法,我会重视一个更基本的解决方案.

我正在使用Web Components v1.

假设有两个自定义元素:

家长element.html

<template id="parent-element">
    <child-element></child-element>
</template>

儿童element.html

<template id="child-element">
<!-- some markup here -->
</template>

我试图在连接时使用connectedCallbackin parent-element初始化整个父/子DOM结构,这需要与定义的方法进行交互child-element.

但是,似乎child-element没有正确定义当时connectedCallback被解雇customElement:

家长element.js

class parent_element extends HTMLElement {
    connectedCallback() {
        //shadow root created from template in constructor previously
        var el = this.shadow_root.querySelector("child-element");
        el.my_method();
    }
}

这不起作用,因为它el是一个HTMLElement而不是child-element预期的.

我parent-element的模板中的所有子自定义元素都已正确附加后,我需要回调.

这个问题的解决方案似乎不起作用; this.parentElement在null里面child-element connectedCallback().

ilmiont

我正在听这集JavaScript Jabber:

http://javascriptjabber.com/120-jsj-google-polymer-with-rob-dodson-and-eric-bidelman/

Rob曾说过:

每个人都有这种第一倾向,因为它非常有意义.你想,"Bootstrap是组件.我只是将它们变成标签."但是你会遇到这样一个事实,即Bootstrap样式表只是一个很长的样式表,假设它可以触及文档的每个部分.当你突然查看标记的一些内容,确定它以便CSS无法到达它时,CSS实际上必须在它的Shadow DOM中,你必须从头开始编写该元素,这是在那里,我认为人们最初会感到非常困惑和沮丧.

这让我很奇怪,您如何使用Web Components解决这个问题？Shadow DOM模板是否有一种方法可以继承常见样式,或者您是否必须为每个单独的组件重复共享CSS？或者是其他东西？

有时候我们需要动态地将自定义元素添加到上下文中.然后:

• 插入的聚合物可以接收绑定到上下文中的另一个属性的一些属性,因此它可以相应地改变.

• 在聚合物0.5处,我们可以使用PathObserver将属性绑定到最近添加的组件的上下文属性.但是,我没有在聚合物1.0中找到解决方法或等效物.

我创建了一个0.5的示例,并为1.0创建了相同的示例.请参阅下面的注射聚合物代码.此外,您还可以看到完整的plunker示例,以便清晰.

Ej 0.5:

<polymer-element name="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
  <script>
    Polymer({
      domReady: function() {
        // injecting component into polymer and binding foo via PathObserver
        var el = document.createElement("another-element");
        el.bind("foo", new PathObserver(this,"foo"));
        this.$.dynamic.appendChild(el);
      }
    });
  </script>
</polymer-element>

请参阅完整的plunkr示例:http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6？p = preview

Ej 1.0:

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "main-context",
    ready: function() {
      // injecting component into polymer and binding foo via PathObserver
      var el = document.createElement("another-element"); …

在Web组件中,要注册元素,只需键入:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

要创建元素,您可以执行以下操作之一:

<x-foo></x-foo>

var xFoo = new XFoo();
document.body.appendChild(xFoo);

var xFoo = document.createElement( 'x-foo')
document.body.appendChild(xFoo);

这一切都很好,花花公子.当您谈论扩展现有元素时,问题就开始了.

var XFooButton = document.registerElement('x-foo-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

问题1:为什么重复？在这里,'button'应该足够了(特别是因为它很容易计算元素的原型Object.getPrototypeOf(document.createElement(tag));

问题2:内部如何使用该信息？例如,如果您拥有prototype: Object.create(HTMLFormElement.prototype和extends: 'button'(后面的内容extends与原型传递不匹配)会发生什么

要创建一个,您可以执行以下操作之一:

<button is="x-foo-button"></button>

var xFooButton = new XFooButton();
document.body.appendChild(xFoo);

var xFooButton = document.createElement('button', 'x-foo-button');
document.body.appendChild(xFooButton);

问题3:因为很明显x-foo-button扩展了button,为什么我们在使用时必须指定它们document.createElement()？我怀疑那是因为document.createElement()只是创建一个带语法的标签<button is="x-foo-button"></button>,这让我想到了下一个问题:

问题4 …

class A extends HTMLElement {
  constructor() {
    super()
    return new Proxy(this, {})
  }
}

window.customElements.define('a-element', A)

<a-element></a-element>

我如何代理自定义元素？

当我尝试它:

Uncaught InvalidStateError: custom element constructors must call super() first and must not return a different object.