Missing support for `<search>` element

[simon-tma]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNUclOwzAQ/ZXI5yY+lFNVUAH1AAdAwNGXEA+tizeNx21R1X/HcUoIZVFv9rxnv2V27NL7ah2BTdiUwHhdE1wIWxTTADU2y3xON2V9pILePZwL1kGCFbyj8p475f0nbMSU8Q6pNLWvVsHZpLFr+eIABMEmRZ60s2SivQu2JPJhwnkjbXomQas1VhaIW2/4LNE4RkvKQCmdmY2rcXXGpQo0HFcQTPmCbhMA0yeCjQYyyS6uAUsEKwEBT5U9ejaUPoJ+yLfqe2H3qRQKjbOvanFUSeOMVxrw3pNy9ns1tdZuc5tnhBH6LM0Smrdf5quw7TI9IGRng/xU4wKog+dPd7BN5x40TkZ9WMMf4CMEp2PrsaNdRSuT7QEvu73JG1Z28RzmWwIbPkO1RnMbmZ/3cf1P9C+7qe2+xf0H3EDoMg==

Steps to reproduce

Include a <search> element in a template

What is expected?

The element is picked up as a native element

What is actually happening?

[Vue warn]: Failed to resolve component: search
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

System Info

No response

Any additional comments?

<search> is a new HTML element that provides a search landmark, rather than requiring role="search" (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search). The element is supported in iOS/iPadOS 17, Safari 17 and Firefox 118.

[felix-berlin]

Hey, got the same error on an Vue + Astro project. I tried to solve the warning with compilerOptions.isCustomElement, but had no luck. Link to my Astro Issue.

[daaanny90]

There is an idea when this will be merged?

[lenaschimmel]

In PR #9249 there is a comment which explains why the PR should not be merged, and I totally agree with that reasoning. I also like the the proposed clean solution.

Anyway, is there any workaround that we can use to suppress the warning until a proper solution is implemented and merged?

[mvsde]

@lenaschimmel You can tell Vue to treat the <search> tag as a custom element to suppress the warning.

I adjusted my Vite configuration like this:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ["search"].includes(tag),
        },
      },
    }),
  ],
});

I used an array to define the tags to have the option to add more if necessary.

There are alternative ways if you don’t use Vite:

https://vuejs.org/guide/extras/web-components.html#skipping-component-resolution