Mozilla 表示Web 组件由三种主要技术组成：
根据 ECMAscript 的模板文字，数字 3，“HTML 模板”甚至是必要的吗？
看看我从James Milner那里得到的这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Component</title>
<script type="text/javascript">
// We define an ES6 class that extends HTMLElement
class CounterElement extends HTMLElement{
constructor() {
super();
// Initialise the counter value
this.counter = 0;
// We attach an open shadow root to the custom element
const shadowRoot= this.attachShadow({mode: 'open'});
// We define some inline styles …javascript web-component template-literals hyperhtml html-templates
我喜欢hyperHtml和lit-html的简单性,它们使用"标记模板文字"来仅更新模板的"可变部分".简单的javascript,不需要虚拟DOM代码和推荐的不可变状态.
我想尝试使用hyperHtml的自定义元素尽可能简单,支持<slot/>模板中的原则,但没有Shadow DOM.如果我理解正确,只有Shadow DOM才能使用插槽？
有没有办法或解决方法<slot/>在不使用Shadow DOM的情况下使用hyperHTML中的原则？
<my-popup>
<h1>Title</h1>
<my-button>Close<my-button>
</my-popup>
虽然有好处,但有些原因我不喜欢使用Shadow DOM:
我开始使用hyperHTML有一个问题
从...开始
const data = [1,2,3]
用铁丝
hyperHTML.bind(document.getElementById('root'))`
<h1>Hello, world!</h1>
${ data.map( num => hyperHTML.wire()`<li>${num}</li>` ) }
`;
使用字符串
hyperHTML.bind(document.getElementById('root'))`
<h1>Hello, world!</h1>
${ data.map( num => `<li>${num}</li>`) }
`;
为什么电线更好？
当wire没有"id"(obj,string)时,它将返回一个没有引用的元素
这是文档,但他们不说为什么应该使用wire over string.
谢谢你的帮助
只是想...会定义更好用吗？就像是:
hyperHTML.define(numberListItem, num => `<li>${num}</li>`)
hyperHTML.bind(document.getElementById('root'))`
<h1>Hello, world!</h1>
${ data.map( num => ${{numberListItem: num}}) }
`;
但现在你要填写每个小元素的名称空间:(
我想有一个语义命名的自定义元素,从按钮扩展:喜欢 fab-button
class FabButton extends HTMLButtonElement {
constructor() {
super();
this.html = hyperHTML.bind(this);
}
}
customElements.define("fab-button", FabButton);
扩展HTMLButtonElement似乎不起作用.
有没有办法从非HTMLElement扩展HyperHTML"document-register-element.js"？
Codepen示例:https://codepen.io/jovdb/pen/qoRare
我决定通过以下方式试用lit-html:
npm install lit-html --save
我听过很多次(来自不同的来源)lit-html的大小只有2或3KB,但是只通过导入html和渲染导出它导致我的webpack增长超过13KB.这比预期的要大得多.
此外,最终的dist包中嵌入了7次:
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject …hyperhtml ×5
javascript ×3
dom ×1
frameworks ×1
html ×1
lit-html ×1
typescript ×1
webpack-4 ×1