mwc-textfield input pattern not working for backslash or vertical bar

I am trying to add a pattern to a mwc-textfield input to filter a file name. My pattern seems to be valid js regex and seems to work on a html input but does not as a pattern on a mwc-textfield. I have two problems:

  1. | or gives Pattern attribute value ^[^|/:*"<>]+$ is not a valid regular expression: ect... but \| works which confuses me
  2. \ never actually seems to match no matter what I try.

Example: https://codesandbox.io/p/sandbox/fervent-field-jjpvjz

Regex: ^[^|\/:*&quot;&lt;&gt;]+$

Can anyone explain this weirdness or what I’m doing wrong?
Thanks!