Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS is polluted when used with Tailwind CSS #41

Open
angelofan opened this issue Oct 8, 2024 · 1 comment
Open

CSS is polluted when used with Tailwind CSS #41

angelofan opened this issue Oct 8, 2024 · 1 comment

Comments

@angelofan
Copy link
Contributor

CSS is polluted when used with Tailwind CSS.

Screenshot

image

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/[email protected]/dist/add-to-homescreen.min.css">
    <script src="https://cdn.jsdelivr.net/gh/philfung/[email protected]/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/[email protected]/dist/assets/img/aardvark-logo.png',
                assetUrl: 'https://cdn.jsdelivr.net/gh/philfung/[email protected]/dist/assets/img/',
                maxModalDisplayCount: -1
            });

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

</body>

</html>
@angelofan
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@angelofan