Clever Geek Handbook

现实世界中的Web组件（第2部分）

自从我发表了《现实世界中的Web组件》以来，已经过去了一年多，而且我已经积累了有关该技术仍然存在问题的新观察结果。也许这些观点将使某人避免其项目陷入僵局。



生锈的车布兰登·莫利特维尼克（Brandon Molitwenik）在Unsplash上的照片



HTML损坏



HTML具有许多有用的功能，这些功能使您无需使用JavaScript即可实现功能。这些功能之一是可以通过在任何输入字段中按Enter键来提交表单的功能。这是一个例子：



<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <button>Send!</button>
</form>


我们输入文本，按Enter，数据被发送到服务器，没有JavaScript。如果需要，您可以避免重新加载页面并通过AJAX发送数据，但是在这种情况下，JS的数量将很少。



现在，让我们尝试用Web组件替换常规按钮：



<form>
  <label>First name: <input type="text"></label>
  <label>Last name: <input type="text"></label>
  <my-button>Send!</my-button>
</form>


Web组件my-button内部包含相同的按钮，没有视觉差异。但是通过按Enter提交表单失败了！这是一个演示，您可以自己查看。



? -, . , . , : Javascript, , -. , - 8 , production-ready.



, -. HTML , label. , , . -! :



<label>First name: <input type="text"></label>
<label>Last name: <my-input></label>


, input "First name", "Last name" - . ! 2 , . – label input . , ? , - -, - ( , ShadowDOM).



CSP



" , ". CSP – , . CSP <style></style> , <link rel="stylesheet"> (, style- , 'unsafe-inline', , ).



-? , ShadowDOM , , ShadowDOM style-, CSP. - : Stencil () LitElement ().



– Constructable Stylesheets API, ShadowDOM unsafe-inline. – CSP, -.



Lifecycle-



, . , ( material-web-components):



<my-menu>
    <my-menu-item />
    <my-menu-item />
</my-menu>


- . connectedCallback. - DOM . , . :



class MyMenu extends HTMLElement {
    connectedCallback() {
        console.log('my menu')
    }
}

class MyMenuItem extends HTMLElement {
    connectedCallback() {
        console.log('my menu item')
    }
}

// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)


, :



"my menu"
"my menu item"
"my menu item"


connectedCallback , . , . , :



"my menu item"
"my menu item"
"my menu"


? my-menu ? HTML , 



// 
customElements.define('my-menu', MyMenu)
customElements.define('my-menu-item', MyMenuItem)

// 
customElements.define('my-menu-item', MyMenuItem)
customElements.define('my-menu', MyMenu)


, connectedCallback. , , . " " , window.setTimeout . " " , . -



, :



Web组件将无法停止渲染破坏者内部。到激活组件时，即使您不想打开此扰流器，内部图像也已开始加载并占用您的流量。



结论



网络组件散布着许多耙子，巧妙地撒满了Google营销。标准中仍有许多未解决的问题，可能会成为您项目中无法克服的障碍。事先了解潜在的缺陷，以便做出更明智的决定，是使用基于Web的组件和框架，还是采用简单的旧HTML / JS / CSS方法，将很有帮助。希望本文对您有所帮助，感谢您的阅读！



More articles:


All Articles