+
+
No Fill / Start Label / No Slot
+
+
+
+
+
+
No Fill / Start Label / Start Slot
+
+
+
+
+
+
+
No Fill / Start Label / End Slot
+
+
+
+
+
+
+
Outline / Start Label / No Slot
+
+
+
+
+
+
Outline / Start Label / Start Slot
+
+
+
+
+
+
+
Outline / Start Label / End Slot
+
+
+
+
+
+
+
Outline / Floating Label / No Slot
+
+
+
+
+
+
Outline / Floating Label / Start Slot
+
+
+
+
+
+
+
Outline / Floating Label / End Slot
+
+
+
+
+
+ Each click on the host is counted, and the target of each is logged to the console. One physical click should
+ count once. Click the padding strip (the gap between the border and the text), the label, the textarea text,
+ and the slotted button, and compare.
+
+
Outline / Async Label
-
+
@@ -183,6 +392,8 @@
Outline / Async Decorations
Add Slotted Content
Update Slotted Content
Remove Slotted Content
+ Add Value to All
+ Add Long Value to All
@@ -252,6 +463,37 @@ Outline / Async Decorations
slottedContent.textContent = 'This is my really really really long text';
}
};
+
+ document.querySelectorAll('ion-textarea.propagation').forEach((textarea) => {
+ const count = textarea.closest('.grid-item').querySelector('.host-count');
+
+ textarea.addEventListener('click', (ev) => {
+ count.textContent = Number(count.textContent) + 1;
+
+ // The deepest target crosses shadow boundaries, so log it from the composed path
+ console.log(`host (${textarea.getAttribute('fill') ?? 'none'})`, ev.composedPath()[0]);
+ });
+ });
+
+ const resetClickCounts = () => {
+ document.querySelectorAll('.host-count').forEach((el) => (el.textContent = '0'));
+ console.clear();
+ };
+
+ const addValueToAll = () => {
+ const textareas = document.querySelectorAll('ion-textarea');
+ textareas.forEach((textarea) => {
+ textarea.value = 'hi@ionic.io';
+ });
+ };
+
+ const addLongValueToAll = () => {
+ const textareas = document.querySelectorAll('ion-textarea');
+ textareas.forEach((textarea) => {
+ textarea.value =
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sodales metus pellentesque lobortis. Duis in libero commodo, auctor risus ut, mattis lacus.';
+ });
+ };