Merge pull request #645 from marp-team/update-morphable-example

Update docs about bespoke transitions: Make simplify the example of morphable elements

Author: yhatt

docs/bespoke-transitions/README.md

@@ -518,48 +518,42 @@ If there were multiple pairs defined by `view-transition-name` CSS property with
 
 In this example, the icon image of "1" on every page is marked as morphable elements named "one" by `view-transition-name` CSS property.
 
-Generally setting [`contain` CSS property][contain] as `layout` or `paint` is also required together with `view-transition-name`. If it lacked, the browser may ignore the morph transition with the error `Shared element must contain paint or layout`.
-
-[contain]: https://developer.mozilla.org/en-US/docs/Web/CSS/contain
-
 ```markdown
 ---
 theme: gaia
 transition: fade
 style: |
-  /* ⬇️ Mark the image of "1" in every pages as morphable image named as "one" ⬇️ */
-  img[alt="1"] {
-    view-transition-name: one;
-    contain: layout; /* required */
-  }
-
-  /* Generic image styling for number icons */
-  img:is([alt="1"], [alt="2"], [alt="3"]) {
+  img[title~="step"] {
     height: 64px;
     position: relative;
     top: -0.1em;
     vertical-align: middle;
     width: 64px;
+
+    /* ⬇️ Mark the image of "1" in every pages as morphable image named as "one" ⬇️ */
+    &[alt="1"] {
+      view-transition-name: one;
+    }
   }
 ---
 
 # Today's topics
 
-- ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666) Introduction
-- ![2](https://icongr.am/material/numeric-2-circle.svg?color=666666) Features
-- ![3](https://icongr.am/material/numeric-3-circle.svg?color=666666) Conclusion
+- ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666 'step') Introduction
+- ![2](https://icongr.am/material/numeric-2-circle.svg?color=666666 'step') Features
+- ![3](https://icongr.am/material/numeric-3-circle.svg?color=666666 'step') Conclusion
 
 ---
 
 <!-- _class: lead -->
 
-![1 w:256 h:256](https://icongr.am/material/numeric-1-circle.svg?color=ff9900)
+![1 w:256 h:256](https://icongr.am/material/numeric-1-circle.svg?color=ff9900 'step')
 
 # Introduction
 
 ---
 
-# ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666) Introduction
+# ![1](https://icongr.am/material/numeric-1-circle.svg?color=666666 'step') Introduction
 
 Marp is an open-sourced Markdown presentation ecosystem.
 
@@ -568,21 +562,16 @@ It provides a writing experience of presentation slides by Markdown.
 
 #### Use HTML to mark morphable contents
 
-By using an inline HTML with enabling raw HTML rendering by `--html` Marp CLI option, you can mark a group of morphable contents with more flexibility.
-
-This example is defining the style of `morph` class, to mark the inner elements as morphable.
+This example is defining the style for `data-morph` attribute, to mark the inner elements as morphable.
 
 ```markdown
 ---
 header: Bubble sort
 transition: fade
 style: |
-  /* Define the style of "morph" class */
-  .morph {
-    display: inline-block;
-    view-transition-name: var(--morph-name);
-    contain: layout;
-    vertical-align: top;
+  /* Define the style of morphable elements (Requires Chrome 133 and later) */
+  [data-morph] {
+    view-transition-name: attr(data-morph type(<custom-ident>), none);
   }
 
   /* Global style */
@@ -591,40 +580,40 @@ style: |
   }
 ---
 
-<span class="morph" style="--morph-name:b7;">███████</span> 7
-<span class="morph" style="--morph-name:b5;">█████</span> 5
-<span class="morph" style="--morph-name:b3;">███</span> 3
-<span class="morph" style="--morph-name:b9;">█████████</span> 9
+<span data-morph="bar7">███████</span> 7
+<span data-morph="bar5">█████</span> 5
+<span data-morph="bar3">███</span> 3
+<span data-morph="bar9">█████████</span> 9
 
 ---
 
-<span class="morph" style="--morph-name:b5;">█████</span> 5
-<span class="morph" style="--morph-name:b7;">███████</span> 7
-<span class="morph" style="--morph-name:b3;">███</span> 3
-<span class="morph" style="--morph-name:b9;">█████████</span> 9
+<span data-morph="bar5">█████</span> 5
+<span data-morph="bar7">███████</span> 7
+<span data-morph="bar3">███</span> 3
+<span data-morph="bar9">█████████</span> 9
 
 ---
 
-<span class="morph" style="--morph-name:b5;">█████</span> 5
-<span class="morph" style="--morph-name:b3;">███</span> 3
-<span class="morph" style="--morph-name:b7;">███████</span> 7
-<span class="morph" style="--morph-name:b9;">█████████</span> 9
+<span data-morph="bar5">█████</span> 5
+<span data-morph="bar3">███</span> 3
+<span data-morph="bar7">███████</span> 7
+<span data-morph="bar9">█████████</span> 9
 
 ---
 
-<span class="morph" style="--morph-name:b3;">███</span> 3
-<span class="morph" style="--morph-name:b5;">█████</span> 5
-<span class="morph" style="--morph-name:b7;">███████</span> 7
-<span class="morph" style="--morph-name:b9;">█████████</span> 9
+<span data-morph="bar3">███</span> 3
+<span data-morph="bar5">█████</span> 5
+<span data-morph="bar7">███████</span> 7
+<span data-morph="bar9">█████████</span> 9
 ```
 
-The name of group can set through CSS variable in `style` attribute.
+The name of morphable elements can set through `data-morph` attribute. Please note that this example is using [advanced `attr()` function](https://developer.chrome.com/blog/advanced-attr), that requires Chrome 133 and later.
 
 <p align="center">
   <img src="./images/morphing-animation-2.gif" alt="Use HTML to mark morphable contents" width="480" height="270" />
 </p>
 
-Due to the security reason, Marp CLI does not render raw HTML tags in Markdown by default. You have to should add `--html` option to use inline HTMLs.
+Due to the security reason, Marp CLI does not render `data-*` attributes in raw `<span>` elements in Markdown by default. You have to should add `--html` option to use.
 
 ```bash
 marp morphable.md --html