How would one go about creating input masks in Stencil.JS web components?

Question

I've been task with creating a styleguide for a company. We want to use web components so that components can be shared across all web platforms regardless of framework. As with many systems, there are sets of form elements that need to be created. Normally I don't even waste my time with this stuff and just buy a subscription to Telerik for the appropriate framework, which gives all the form input elements that you need and is well tested...they just work. I tried importing 'inputmask', (https://www.npmjs.com/package/inputmask) which seems to be the most widely used free mask library, but when compiling Stencil components, it's very buggy. Does anyone have any suggestions on the best way to go about creating masked inputs for web components? More specifically with Stencil.JS? Any library suggestions? Am I overthinking this? Is it easier to make them yourself?

Answer 1

This worked for me:

Page component:

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

Custom input component:

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} />
  }
  
}