Hello light text!
Hello light element!

• Besides all three elements is a green border left. This green border is associated with the slot element itself, which being "display: inline-block;" gets a border.
• "Hello light element!" has a blue border top and left, as the span element is given this CSS property in the lightDOM in which it is declared. It has no red border, neither left nor bottom, as the CSS rules inside the shadowDOM does not apply to elements transposed into it.
• "Hello shadow element!" has a red border bottom and left, as the span element is given this CSS property in the shadowDOM in which it is declared. It has no blue border, neither left nor top, as the CSS rules in the lightDOM does not apply to elements in the shadowDOM.