Best practises for styling?

[flatcapco]

I might be expecting the wrong thing for this package re styling however what is the best way to embed a component into a site and keep its styling isolated? Or would we still reach for an iframe in this case? Or do we simply just need to include a bit reset then namespace the css?

[mattsmallman]

I am far from an expert on this but have been looking at different options as I am experiencing the same issues. I can address the styling with some minor modifications to the JS to create a shadow DOM but then I lost all of the interactivity as the main js is in the other DOM. I suspect the package could be re written to use this approach but it is far beyond my skill so I'm just going to tweak CSS unless someone has a better idea.

[PhiloNL]

I would recommend generating some scoped CSS and using the @assets directive:

<div class="my-component">
   <div class="text-black">Hello</div>
</div>

@assets
<link rel="stylesheet" type="text/css" href="mycss.css">
@endassets

You can use PostCSS for example:

const postcss = require('postcss');

module.exports = {
    plugins: {
        "postcss-import": {},
        tailwindcss: {},
        "postcss-nested": {},
        autoprefixer: {},
        'postcss-prefix-selector': {
            prefix: '.my-component ',
            exclude: [':root', /^\.my-component/],
        },
        cssnano: {},
    }
}

mycss.css

@tailwind base;
@tailwind components;
@tailwind utilities;

This will generate a CSS file where everything is prefixed, so your CSS looks something like this:

.my-component .text-black { color: #000; }