I have an Article component which wraps the markdown from <slot/> in an <article> tag and applies all my article styles and layout.
Unfortunately, because I need many of these styles to propogate down to the mardown file itself (where most of the elements I want to style are), I've had to set is:global on the styles. This causes two problems
Styles are global so bleed out into other pages if they loads any part of a post (eg. a posts list page).
The styles bleed down the cascade into components included in my posts, which I definitely don't want.
Option 1
Keep my articles in a collection and then programmatically import an article into Article.astro. Because the markdown is imported into the file (and not just there via </slot> my styles should apply to it. Is this the "recommended" way of doing this?
Option 2
Wrap all markdown in a Prose or Article component in every markdown file - this is a shit solution and may not even work.
Option 3
Create my own custom components for each of the fundamental elements, with their own encapsulated styles. Then tell the markdown renderer to use them instead of the default HTML elements. But I don't think this will address the issue.
I have an
Articlecomponent which wraps the markdown from<slot/>in an<article>tag and applies all my article styles and layout.Unfortunately, because I need many of these styles to propogate down to the mardown file itself (where most of the elements I want to style are), I've had to set
is:globalon the styles. This causes two problemsOption 1
Keep my articles in a collection and then programmatically import an article into
Article.astro. Because the markdown is imported into the file (and not just there via</slot>my styles should apply to it. Is this the "recommended" way of doing this?Option 2
Wrap all markdown in a
ProseorArticlecomponent in every markdown file - this is a shit solution and may not even work.Option 3
Create my own custom components for each of the fundamental elements, with their own encapsulated styles. Then tell the markdown renderer to use them instead of the default HTML elements. But I don't think this will address the issue.
Link Appending