Javascript 如何在Stencil.JS web组件中创建输入掩码？

我一直致力于为一家公司创建一个样式指南。我们希望使用web组件，以便组件可以在所有web平台上共享，而不考虑框架。与许多系统一样，需要创建一组表单元素。通常情况下，我甚至不会浪费时间在这些东西上，只需购买Telerik订阅的相应框架，它提供了您需要的所有表单输入元素，并且经过了良好的测试……它们可以正常工作。 我试着导入“inputmask”，（），这似乎是使用最广泛的免费掩码库，但在编译模具组件时，它非常有缺陷。 有人对为web组件创建屏蔽输入的最佳方法有什么建议吗？更具体地说是使用Stencil.JS？有图书馆的建议吗？我是不是想得太多了？自己做比较容易吗？

这对我来说很有用：

页面组件：

export class Page {
  render() {
    <custom-input mask="(99)99999-9999">
  }
}

import Inputmask from 'inputmask';

@Component({
  tag: 'custom-input',
  shadow: false // very important
})
export class CustomInput {
  nativeInput?: HTMLInputElement;
  @Prop() mask?: string;
  componentDidLoad() {
    if (this.mask) {
      Inputmask({"mask": this.mask}).mask(this.nativeInput);
    }
  }
  render() {
    return <input ref={el => this.nativeInput = el as HTMLInputElement} />
  }
  
}

导出类页面{
render（）{
}
}

自定义输入组件：

export class Page {
  render() {
    <custom-input mask="(99)99999-9999">
  }
}

import Inputmask from 'inputmask';

@Component({
  tag: 'custom-input',
  shadow: false // very important
})
export class CustomInput {
  nativeInput?: HTMLInputElement;
  @Prop() mask?: string;
  componentDidLoad() {
    if (this.mask) {
      Inputmask({"mask": this.mask}).mask(this.nativeInput);
    }
  }
  render() {
    return <input ref={el => this.nativeInput = el as HTMLInputElement} />
  }
  
}

从“Inputmask”导入Inputmask；
@组成部分({
标记：“自定义输入”，
影子：错//非常重要
})
导出类自定义输入{
nativeInput？：HTMLInputElement；
@Prop（）掩码？：字符串；
componentDidLoad（）{
如果（此.mask）{
Inputmask（{“mask”：this.mask}）.mask（this.nativeInput）；
}
}
render（）{
返回this.nativeInput=el作为HTMLInputElement}/>
}
}