Web componentd组件内部事件回调及痛点剖析

 更新时间:2021年11月25日 16:15   作者:厦门在乎科技
这篇文章主要为大家介绍了Webcomponentd组件内部事件回调示例及其痛点的剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

写在前面

最近致力于研究 Web components(以下简称WC),并且也初有成效的拿到了一定的结果,但今天想回过头来重新审视一下 WC。

WC 到底是什么?

简单的讲,Web Component 就是把组件封装成 html 标签的形式,并且在使用时不需要写额外的 js 代码。

组件是前端的发展方向,抛开周边技术生态,单纯看 React 和 Vue 都是组件框架。因此,WC 可以视为原生标签的拓展/延伸,说到底,它依旧是一个标签!

类似 <video></video> 标签,相比于原生标签,它多了更为丰富的样式和可操作属性。

谷歌公司由于掌握了 Chrome 浏览器,一直在推动浏览器的原生组件,即 Web Components API。

相比第三方框架,原生组件简单直接,符合直觉,不用加载任何外部模块,代码量小。貌似一切完美,似乎大有可以用来替换React、Vue之类的趋势。

目前存在的缺陷

与其它 web 框架一起使用存在一些小问题,会给开发体验上造成一些困扰。

1、组件内部事件的回调

比如,一个弹窗组件(<my-dialog></my-dialog>)中的确定按钮,那么它的事件是如何触发的呢?

class myDialog extends HTMLElement {
  // ...
  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <div class="dialog">
        <div class="dialog-content">
          <div class="dialog-body">
            弹窗内容
          </div>
 
          <button id="okBtn">确定</button>
        </div>
      </div>
    `;
     shadowRoot.querySelector('#okBtn').addEventListener('click', () => {
      // 组件内部定义事件
      this.dispatchEvent(new CustomEvent('okBtnFn'));
    });
  }
} 
customElements.define('my-dialog', myDialog);

现在方案是 custom element 内部自定义事件 new CustomEvent(),外部用 addEventListener监听。这样的写法是很丑陋的,仿佛又回到了原生 JS 写应用的时代。

<my-dialog></my-dialog> 
<script>
  export default {
    created() {
      document.addEventListener('okBtnFn', function(){
        // 点击弹窗按钮,触发回调事件
      });
    }
  }
</script>

2、组件样式覆盖

对于开发者来说,难免会遇到需要调整组件内部样式的时候。无论你是使用antdvant还是使用其它组件库,但 WC 的 CSS 防污染机制导致你很难修改内部样式。这需要你付出一些代价来变相的修改内部样式

3、组件内部资源相对路径问题

就目前来说,任何直接基于 Custom Element v1, Template 和 HTML Import 的组件都无法做到完全资源独立 —— 在不知道使用方环境且不给使用方增加额外限制的情况下使用内部封装的任何资源文件。比如如果你有一个自定义 icon 组件:

class MyIcon extends HTMLElement {
    static get observedAttributes() { return ['name','size','color'] }
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">
                <use id="use"></use>
            </svg>        
    } 
    attributeChangedCallback (name, oldValue, newValue) {
        if( name == 'name' && this.shadowRoot){
            // 如果使用的项目中,根目录没有 icon.svg 文件,那就 gg
            this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `./icon.svg#icon-${newValue}`);
        }
    }
}
customElements.define('my-icon', MyIcon);

如果使用的项目中,根目录没有 icon.svg 文件,那就 gg。如果你在这里使用 cdn 路径,就会出现跨域问题。

4、form表单类组件 value 获取问题

Shadow DOM 中包含有 <input>、<textarea> 或 <select> 等标签的 value 不会在 form 表单中自动关联。

示例代码:

// web component
class InputAge extends HTMLElement {
  constructor() {
    super();
  }  
// connect component
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' });
    shadow.innerHTML = `<input type="number" placeholder="age" min="18" max="120" />`;
  }
}
// register component
customElements.define( 'input-age', InputAge );

WC 组件被使用后

<form id="myform">
  <input type="text" name="your-name" placeholder="name" />
  <input-age name="your-age"></input-age>
 
  <button>submit</button>
</form>
 
<script>
 const form = document.getElementById('myform');
 
  form.addEventListener('submit', e => {
    
    e.preventDefault();
    console.log('Submitted data:');
 
    const data = new FormData(form);
    for (let nv of data.entries()) {
      console.log(`  ${ nv[0] }: ${ nv[1] }`);
    }
 
  });
</script>

提交的时候无法获取 input-age 的 value。当然会有解决方案,但会很复杂。

5、其它

此外,缺少数据绑定和状态管理也是 WC 存在的缺陷,此处不再赘述。

写在后面

WC 指在丰富 HTML 的 DOM 特性,让 HTML 拥有更强大的复用能力

WC 可以直接当做原生标签,在任何前端框架和无框架中运行

结合当下的主流技术栈来说,WC 当前主要问题在于复杂的组件中,数据通信和事件传递存在一定使用成本

兼容问题,比如可以覆盖内部样式的 :part 方法

以上就是Web componentd组件内部事件回调及痛点剖析的详细内容,更多关于Web componentd事件回调及痛点的资料请关注猪先飞其它相关文章!

原文出处:https://blog.csdn.net/weixin_41996102/article/details/121290

相关文章

  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-02
  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
  • c# JSON返回格式的WEB SERVICE

    首先用c#创建一个web service,主要是利用其WSDL的功能,当然也可以利用php创建一个,道理都是一样的...2020-06-25
  • 清平云 betweb云服务完美版虚拟主机自动化套件使用介绍

    这篇文章主要介绍了清平云 betweb云服务完美版虚拟主机自动化套件使用介绍,需要的朋友可以参考下...2016-09-28
  • Tomcat首次部署web项目流程图解

    这篇文章主要介绍了Tomcat首次部署web项目流程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-11
  • Vue初始化中的选项合并之initInternalComponent详解

    这篇文章主要介绍了Vue初始化中的选项合并之initInternalComponent的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-11
  • Web容器启动过程中如何执行Java类

    这篇文章主要介绍了Web容器启动过程中如何执行Java类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-15
  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21
  • 创建一个完整的ASP.NET Web API项目

    ASP.NET Web API具有与ASP.NET MVC类似的编程方式,ASP.NET Web API不仅仅具有一个完全独立的消息处理管道,而且这个管道比为ASP.NET MVC设计的管道更为复杂,功能也更为强大。下面创建一个简单的Web API项目,需要的朋友可以参考下...2021-09-22
  • JavaWeb实战之编写单元测试类测试数据库操作

    这篇文章主要介绍了JavaWeb实战之编写单元测试类测试数据库操作,文中有非常详细的代码示例,对正在学习javaweb的小伙伴们有很大的帮助,需要的朋友可以参考下...2021-04-22
  • 什么是web3.0

    什么是WEB3.0?业内专家诠释:即"WEB3.0=互联网+通讯服务(Internet+Instant Communications)",即通过互联网与通讯的融合,用户可以用所有智能终端(固定电话、移动电话、PC、IP...2016-09-20
  • Nginx + php 搭建 超性能 WEB 服务器

    Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAPPOP3SMTP 代理服务器。...2016-01-27
  • Java web Hibernate如何与数据库链接

    这篇文章主要介绍了Java web Hibernate如何与数据库链接,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-01
  • web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助...2021-09-24
  • C# web api返回类型设置为json的两种方法

    web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面为大家介绍几种不错的方法...2021-09-22
  • Web技术:易趣 vs 淘宝

    这两个月来,因为工作的需要,对 Web 相关的技术做了一点研究,经过在自己的 站点 上一点实践。觉得自己还算略有心得[实际上是刚刚入门的啦:)]。 本着学以致用的原则...2016-09-20
  • SpringMvc web.xml配置实现原理过程解析

    这篇文章主要介绍了SpringMvc web.xml配置实现原理过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-12
  • Web制作验证码功能实例代码

    web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧...2017-06-24
  • Microsoft Expression Web 简体中文正式版 官方下载地址

    Microsoft Expression Web 简体中文正式版相对于早期的 Microsoft Expression Web Designer CTP1(英文)除了它是正式的中文版外,有进步的地方1.对标签的id名称加上了css的代...2020-06-25