4 ms·

Hello! I've been trying to adopt Web Components and have had limited success specifically because (since these are internal components) I want to use my applica

Hello! I've been trying to adopt Web Components and have had limited success specifically because (since these are internal components) I want to use my application styles, but can't share them across the shadow dom. Do you have a good writeup or example on the way you're working? I'm googling Constructable Stylesheets, but would love any other pointers, because what you're doing sounds like exactly what I've been wanting to do. Edit: I see Constructable Stylesheets are Chrome-only. Unfortunately that's a deal-breaker for me :/

scorxn 6y ago
Not the parent commenter, but I have an app whose web components inherit from a class with this constructor: constructor(html) { super(); const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "/theme.css"; const template = document.createElement("template"); template.innerHTML = html; this.attachShadow({ mode: "open" }).append(link, template.content); } Global things like vars, default typography, and input style resets go in theme.css.