unstyled-web-components
v0.0.86
Published
[Find the docs here](https://hesxenon.gitlab.io/unstyled-web-components/)
Downloads
385
Readme
Unstyled Web Components
A repository of custom elements that don't use the
shadow dom and can thusly be easily styled.
For guides just open the index.html in the respective components folders.
Requirements
- A Baseline2023 compatible browser
- support for position anchors (can be polyfilled with
@oddbird/css-anchor-positioning)
Usage
In Browser
load uwc by adding this to your htmls <head>:
<!-- defer is necessary if you serve some uwc component along with the full html -->
<script
defer
src={`https://unpkg.com/unstyled-web-components@${version}/dist/index.js`}
></script>
<!-- default styling, i.e. the "user agent stylesheet". I'd recommend including this. -->
<link
rel="stylesheet"
href={`https://unpkg.com/unstyled-web-components@${version}/dist/index.css`}
/>With a bundler
Include an ambient import as close to your entrypoint as possible. Depending on your final configuration you should not forget to externalize this dependency.
import "unstyled-web-components";Integrating with React
Integration with react proves somewhat tricky because of the synthetic event bus react uses.
See this blog post for details.
Other than that it should work fine as long as you don't try to .preventDefault and such.
Do note however that there is no such thing as defaultValue available since react obviously doesn't wrap the uwc elements as it does the native elements so setting default values will probably need a wrapper that utilizes refs.