Comments (6)
Can you share how are you using the component?
LitElement.init must be called on top of the render function
this error if I recall correctly only happens if you don't call it in the top of your LitElement
decorated function so if we could see how you were using it on your first example it would be nice
Also I would test this in the final build mode because I'm not sure it is supported
from fable.lit.
Here is how I use it:
[<LitElement("ol-map")>]
let OlMap () =
Hook.useHmr hmr
let this, props =
LitElement.init (fun cfg ->
cfg.useShadowDom <- true
cfg.props <-
{|
map = Prop.Of(Map.map [], attribute = "map")
|}
cfg.styles <- [
css $"{olCss}"
// unsafeCSS olCss
css $"""
.map {{
width: 100%%;
height: 80vh;
background: #a2e7ff;
}}"""
])
Hook.useEffect (fun () ->
if isNull this.shadowRoot |> not then
let target = getShadowElementById this "map"
props.map.Value.setTarget target
)
html $"""<div id="map" class="map"></div>"""
When you say final build mode, you mean the output of fable --run vite build
?
from fable.lit.
Lit has a restriction that styles must be statically declared with the css
tagged template (so they can be analyzed and ensure they don't contain malicious code): https://lit.dev/docs/components/styles/#expressions
The error is misleading, it seems we're missing a Promise.catch here to show the actual error:
Fable.Lit/src/Lit/LitElement.fs
Lines 246 to 247 in 82c3286
from fable.lit.
What is then the correct way of getting a css package into a (shadowed) component? I'm interfacing OpenLayers to Fable (I'll release the package in due time), and OpenLayers comes with a bunch of css, and it would be nice (but not strictly necessary) to contain it in the Lit component.
from fable.lit.
One thing that the shadow DOM has is that it was not designed to work with global styles so this tends to create a lot of friction when you try to integrate with third party style libraries.
The simplest and fastest workaround would be to just not use shadow DOM if you depend heavily on third party css or while not optimal but doable you can add a style/link tag inside your shadow DOM component and it should work properly
but for completeness the ideal thing though would be to use css import assertions
please note that while css assertions are already on the spec it is only supported in chrome and thus needs a polyfill
// please note that Fable doesn't have an out of the box
// way to import css/json assertions so you need to create
// cssImport manually somehow
let styles: obj = cssImport "dependency.css"
// inside the config function
cfg.styles <- [ css $".my-local-style {{ display: flex }}"; unbox styles]
That being said I made a project which hasn't been updated in a while that covers this use case it's called Fable.ShadowStyles and you can see me hacking my way around thanks to vite here and using them here
from fable.lit.
Thank you for your suggestions @AngelMunoz!
from fable.lit.
Related Issues (20)
- Accessing children in custom element HOT 6
- Class Based API vnext HOT 1
- What does this mean? HOT 4
- Is there similar pattern in Lit that uses React.useContext (Context propagation)? HOT 1
- Hooks.useTransition is leaving transition-enter classname to its next sibling. HOT 4
- Simple SVG is not rendering properly HOT 3
- Lit.mapiUnique HOT 4
- Self closing tag LitComponents are not closing properly if there's an HTML element after it HOT 2
- LitLabs.motion.animate() throws an error HOT 1
- Q: wrapping requirejs amd module (durandaljs interop) HOT 2
- Incongruence in documentation HOT 1
- Update to .net 6 HOT 5
- Use of Hook.useRef HOT 1
- Upgrading to Fable.Lit 1.4.2 causes issues in Elmish types HOT 1
- Astro integration HOT 2
- Update Fable.React and Feliz Bindings HOT 4
- Hook.useTransition with more events
- Hook.Elmish doesn't rerun when props change HOT 2
- hasChanged and currying problems
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable.lit.