I am making a web component based app – testing my ability – and I seem to have hit a bit of a hurdle: Getting webpack to put the CSS imported in the web-component in the shadow dom.
At present it takes the CSS i import in the component and then sticks it in the overall document’s head. This obviously means that the web component cannot access it.
I feel like I am now tearing my hair out over this and it is taking up way too much time. Does anyone know the solution to my problem or it is it even possible?
It was basically a matter of telling webpack where to put the CSS when it had processed it. I think I was up late last night. I will update the question now in case anyone else gets stuck.
EDIT: I’ll post the solution here in so I can mark it as the solution.
EDIT 2: Thanks to @snigo for steering me toward a more concise and appropriate solution.
I have removed the original solution as it is not great practice. In order to solve the issue and still enable other stylesheets I followed @snigo’s instruction of prepending a specific selector to the web component’s stylesheet and then created a separate rule for that file type.
I then created an empty style element in my web component and set its innerHTML to the imported stylesheet. My web component is now as follows:
Done bud! The reason I love coding is moments like this… You’re pulling your hair out like “why wont it work” then you crack it and it is a moment of pure joy
I never really worked with Custom Elements, so I might be wrong, but as far as I understand you might want to scope styles within each element separately using templates:
import myElementStyles from './myElement.style.css';
const myElementTemplate = document.createElement('template');
template.style = myElementStyles;
// ...append any html elements you like
// ...attach template to the shadow
So now, you can create 2 rules in your webpack config, one for /.style.css$/ and another one for /(?<!\.style).css$/ (anything that ends with .css but not preceded with .style). The first one will only have css-loader and the second both css- and style-loader.
css-loader will resolve your css but will not append it to the head of the document - that what’s style-loader does.
Oh, yours sounds much better than my solution! I will give this a try as well as mine is somewhat a hack I would guess – If there is CSS elsewhere is will end up in my component’s shadowDOM
I’m afraid in your example you’re suggesting style loader to insert every *.css file css loader will encounter into your custom element, which is not a great idea, yeah!