标签: web-component

我已经定义了一个自定义 DOM 元素，但是当放置在表单中时，它不会提交它。单击按钮时如何获取要提交的表单？

<form action="/foo" method="GET">
  <my-button type="submit">click me</my-button>
</form>

这是自定义元素的原型配置：

myButton = Object.create(HTMLButtonElement.prototype);

按钮的模板如下所示：

<template>
  <button type="submit" id="button"><content></content></button>
</template>

I\xe2\x80\x99m<select>使用本机 DOM（无 Polymer）编写自定义元素。

I\xe2\x80\x99m 尝试将我的元素与<label>元素一起使用，并在单击时正确触发我的元素的单击事件<label>，即：

<label>\n  My Select:\n  <my-select placeholder="Please select one">...</my-select>\n</label>\n

或者

<label for=\'mySelect1\'>My Select:</label>\n<my-select id=\'mySelect1\' placeholder="Please select one">...</my-select>\n

tabindex但是，即使我添加 a使其可聚焦，这种行为似乎也无法开箱即用。

这里\xe2\x80\x99是代码的精简版本和带有一些基本调试的JSFiddle ：

var MySelectOptionProto = Object.create(HTMLElement.prototype);\ndocument.registerElement(\'my-select-option\', {\n  prototype: MySelectOptionProto\n});\nvar MySelectProto = Object.create(HTMLElement.prototype);\n\nMySelectProto.createdCallback = function() {\n  if (!this.getAttribute(\'tabindex\')) {\n    this.setAttribute(\'tabindex\', 0);\n  }\n  \n  this.placeholder = document.createElement(\'span\');\n  this.placeholder.className = \'my-select-placeholder\';\n  this.appendChild(this.placeholder);\n\n  var selected = this.querySelector(\'my-select-option[selected]\');\n  \n  this.placeholder.textContent = selected\n    ? selected.textContent\n    : (this.getAttribute(\'placeholder\') || \'\');\n};\ndocument.registerElement(\'my-select\', …

我想在自定义元素内动态创建一个 CodeMirror 实例，并将其存在于元素的 Shadow DOM 内。例如：

<code-mirror>foo</code-mirror>
<script>
window.customElements.define('code-mirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});
    }
});
</script>

这“有效”，但布局完全错误。左边距设置为窗口的宽度，行号显示不正确，并且选择逻辑垂直偏离了几行。

这是一个演示布局问题的 jsfiddle：链接

建议？

我一直在阅读 Web 组件，并认为它们很棒，所以我跳入了我喜欢的工作空间（与代码、Typescript 2.4.2），但它似乎不支持 Web 组件，或者它们得到部分支持？HTMLElement 类型定义包含一个标记为“shadow root”的只读字段，但默认情况下该字段为 null，并且 HTMLElement 类型 def 没有方法：create Shadow root() 所以我不确定我是否在做这是错误的，或者如果我是的话有人能指出我正确的方向吗？

我们有主要的大型应用程序，并将使用不同的库（Angular、React 等）创建单独的小型应用程序（微服务），并将它们编译成 Web 组件以便在任何地方使用它们。主应用程序有一些库（例如 underscore.js），我们的一些组件使用相同的库（例如 lodash.js），在这种情况下，我们在主应用程序中使用 Web 组件时会看到很多冲突。您对如何隔离 Web 组件库以及它们可以在隔离模式下工作有什么想法吗？我们也使用了 ShadowDOM，但没有成功。

我当前的项目使用 Web 组件（自定义元素和 Shadow DOM），这使我能够封装复杂的逻辑和样式，远离 Light DOM。

不幸的是，我现在遇到了一个障碍，我需要能够随意切换元素，而无需解除绑定和重新绑定事件处理程序的麻烦。

对我来说，这听起来像是事件委托的工作，因此我尝试向 Light DOM 中的父节点添加一个事件侦听器，希望该事件能够从 Shadow DOM 中冒出。

这似乎违背了 Shadow DOM 的封装，并且 event.target 始终是 ShadowRoot 而不是子级。

在这种情况下我可以做些什么来允许经典事件委托吗？下面的代码片段显示了问题。我希望能够单击内部 DIV 并在单击事件处理程序中处理单击，但 event.target 始终是 custom-el

/* jshint esversion: 6 */

customElements.define('custom-el', class extends HTMLElement {

	constructor() {
		super();

		this._shadowRoot = this.attachShadow({
			mode: 'open'
		});

		const oInnerDiv = document.createElement('div');
		oInnerDiv.classList.add('inner');
    oInnerDiv.style.border = '2px solid blue';
    oInnerDiv.style.padding = '3rem';
		this._shadowRoot.appendChild(oInnerDiv);
	}

});

document.addEventListener('click', oEvent => {
	document.getElementById('result').innerText = oEvent.target.tagName;
}, true);

html {
	box-sizing: border-box;
}

*,
*::before, …

这是我所拥有的：

一个包含大量组件和内容的 VUE ClI 3 项目。

我需要的：

这是一种重用该项目并将其包含在我客户的网站上的方法，非常简单。我正在考虑只添加一个 JS 文件和一点 HTML 片段。

我做了什么：

我一直在使用 VUE CLI 3 将我的项目导出为 Web 组件。这非常有效，因为现在我只需使用一个 JS 文件和我创建的 Web 组件标签。

问题：

问题是我在项目中使用 Tailwindcss 设置的所有样式都没有在 Web 组件内设置样式，因为这些样式似乎不包含在内。

通常，您会在每个 Vue 组件本身中包含您的样式。（我使用的是 .vue 单个组件）但是由于我使用的是 TailwindCSS，所以我在 HTML 标签上使用了很多类。这在我的 VUE CLI 3 项目中运行良好，因为我使用 PostCSS 作为 TailwindCSS。但当我创建 Web 组件时它不再起作用。我也没有输出的 CSS 文件。我只有 tailwind.css 文件：

@tailwind preflight;
@tailwind components;


// my custom styles

@tailwind utilities;

我的问题：

那么我如何才能将 TailwindCSS 样式以及我的自定义 CSS 样式获取到 Web 组件中呢？

我的 Bower.json 中有这两个依赖项：Polymer/polymer#^2.6.0 和 webcomponents/webcomponentsjs#^v1.1.0。

在我的 index.html 中，如果我添加，我看不到任何区别

<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
or  
<script src="bower_components/webcomponentsjs/webcomponents-loader.js">.

从https://www.npmjs.com/package/webcomponents-lite我读到“webcomponents-lite.js 包括除影子 DOM 之外的所有 polyfill”，并从https://www.npmjs.com/package/web-components-我读到“将 HTML 文件及其所有依赖项复制到公共/输出目录中的命名空间位置”。我可以假设 web-components-loader 执行 webcomponents-lite 默认执行的操作以及其他一些加载功能吗？有什么理由使用其中一种而不是另一种吗？看来 webcomponents-lite 的加载过程较少，所以如果它符合我的需求，它会比 webcomponents-loader 更好吗？

我有一堂课叫QueryAddable

class QueryAddable extends HTMLElement {
  connectedCallback() {
    console.log('QueryAddable');
  }

它有几个扩展它的类，例如

class QueryGroup extends QueryAddable {
  constructor() {
    super();
  }
  connectedCallback() {
    console.log('QueryGroup');
  }

最好，如果我放在<query-group>页面上，我希望看到QueryAddable并QueryGroup登录控制台。我想这不会发生，因为我只<query-group>在页面上而不是<query-addable>.

我完全可以将一个方法放入QueryAddable被调用的方法中，onLoad并在每个扩展类的 中调用该方法connectedCallback，但为什么我必须在多个地方而不是一个地方执行此操作呢？

有没有办法让这两个connectedCallback函数都运行，或者是否设置为只有一个函数可以运行？

我正在尝试遵循这些使用 Web 组件的说明。我安装了聚合物纸按钮npm install --save @polymer/paper-button，将以下内容添加到我的index.html 中，并使用 vscode 的实时服务器打开它。但我收到控制台错误：Uncaught TypeError: Failed to resolve module specifier "@polymer/iron-flex-layout/iron-flex-layout.js". Relative references must start with either "/", "./", or "../".。我想在不使用像 webpack 这样的模块捆绑器的情况下解决这个问题。

<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
...
<paper-button raised class="indigo">raised</paper-button>