CSS is polluted when used with Tailwind CSS

angelofan commented 1 month ago

CSS is polluted when used with Tailwind CSS.

Screenshot

Code

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/philfung/add-to-homescreen@2.2/dist/add-to-homescreen.min.css">
    <script src="https://cdn.jsdelivr.net/gh/philfung/add-to-homescreen@2.2/dist/add-to-homescreen.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<title>TitleofApp with Tailwind CSS</title>
<style>
    body {
        min-height: 100vh;
    }
</style>

<body>
    <div>
        <button id="addToHomeScreen" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
            Add to Home Screen
        </button>
    </div>
    <script>
        document.getElementById('addToHomeScreen').addEventListener('click', function (event) {
            event.stopPropagation();
            window.AddToHomeScreenInstance = new window.AddToHomeScreen({
                appName: 'TitleOfApp',
                appIconUrl: 'https://cdn.jsdelivr.net/gh/philfung/add-to-homescreen@2.2/dist/assets/img/aardvark-logo.png',
                assetUrl: 'https://cdn.jsdelivr.net/gh/philfung/add-to-homescreen@2.2/dist/assets/img/',
                maxModalDisplayCount: -1
            });

            ret = window.AddToHomeScreenInstance.show('en');
        });
    </script>

</body>

</html>

angelofan commented 1 month ago

One of the solutions is to consider using Shadow DOM.

An important aspect of custom elements is encapsulation, because a custom element, by definition, is a piece of reusable functionality: it might be dropped into any web page and be expected to work. So it's important that code running in the page should not be able to accidentally break a custom element by modifying its internal implementation. Shadow DOM enables you to attach a DOM tree to an element, and have the internals of this tree hidden from JavaScript and CSS running in the page.