vitejs
Asset discovery for custom HTML elements and/or attributes
Description
As a developer who makes extensive use of web components and ad hoc HTML attributes, I would like to see Vite support asset resolution/discovery for arbitrary elements and attributes. Some of my use cases:
<!-- Web component refering to a static HTML file -->
<html-import src="./some/other/file.html"></html-import>
<!-- data-* attributes refering to images -->
<img src="/layout-default.png" data-src-dark="/layout-dark.png" data-src-light="/layout-light.png" alt="">
I've previously been using Parcel, where I was able to add support for custom elements and attributes via a plugin. IMHO this deserves to be a built-in feature, as both web components and data-* attributes are well-established web standards.
This issue has come up before (eg. https://github.com/vitejs/vite/issues/5098), but never really got addressed, as far as I can tell. The list of elements and attributes that Vite takes in as asset sources got extended over time (eg. https://github.com/vitejs/vite/pull/11138), but has remained a non-configurable constant.
Suggested solution
From skimming the code base, I get the impression that making DEFAULT_HTML_ASSET_SOURCES a configurable option would handle my use cases.
Alternative
A plugin API to build DIY asset resolution would also work - just a function that one can stuff additional asset paths into should suffice. See Parcel's asset.addURLDependency() for an example.
Additional context
No response
Validations
- [x] Follow our Code of Conduct
- [x] Read the Contributing Guidelines.
- [x] Read the docs.
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
