Utility
Styling
Portals are a way to render content outside of the normal DOM location where
they would be placed. Content inside of a portal will be moved the end of
<body>
. This can be useful to avoid inheriting any styling or positioning rules from
parent elements, while still being able to keep the code for related parts together.
A page can have as many portals as you need.
<script>
import { Portal } from '@thetinkerinc/colibri';
</script>
<div id="parent">
<div>
This is regular content inside of a div with styling.
Look at the bottom of the page to see a sibling element
placed in a portal.
</div>
<Portal>
<div id="portal">This is content inside of the same div, but in a portal. You can see that it doesn't inherit the text styling of the parent. Also, check the devtools to see that this element is rendered at the end of the document body.</div>
</Portal>
</div>
<style>
#parent {
color: red;
}
#portal {
position: fixed;
bottom: 0;
margin: 2rem;
padding: 1rem;
border-radius: 0.25rem;
background: #d1d5db;
opacity: 0.4;
transition: opacity 0.4s;
}
#portal:hover {
opacity: 1;
}
</style>
This is regular content inside of a div with styling. Look at the bottom
of the page to see a sibling element placed in a portal.
This is content inside of the same div, but in a portal. You can see that it doesn't inherit the text styling of the parent. Also, check the devtools to see that this element is rendered at the end of the document body.
Props
This component doesn't have any props
Slots
default:
Events
This component doesn't emit any events
Styling
This component doesn't have any custom styling