[Webkit-unassigned] [Bug 226245] New: Slot elements (Web Components v1) containing only digits bug

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue May 25 15:59:53 PDT 2021


https://bugs.webkit.org/show_bug.cgi?id=226245

            Bug ID: 226245
           Summary: Slot elements (Web Components v1) containing only
                    digits bug
           Product: WebKit
           Version: Safari 14
          Hardware: iPhone / iPad
                OS: iOS 14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: JavaScriptCore
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: timo.rossa at tutanota.com

Created attachment 429704

  --> https://bugs.webkit.org/attachment.cgi?id=429704&action=review

Check rendered elements and DOM in Dev Tools

Sorry for posting it in the wrong place, I am new here.

In the following reproduction I use the same Custom Element twice. Everything is the same but the content of the slot. First it contains an alphanumeric string and in the second example it contains a string containing digits.

The second slot is not in the right place in the DOM and somehow rendered twice. You can see the difference immediately by noticing it has a text-decoration (underline), although it shouldn't have it. Please see the attached image.

This bug happens on all latest Safari for iOS versions. It does NOT happen on Safari for Mac or any other browser.

Reproduction:

```JavaScript
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8" />
   <title>Shadow</title>
   <link rel="icon" href="data:," />
  </head>
  <body>
   <script>
    customElements.define(
     "my-anchor",
     class extends HTMLElement {
      connectedCallback() {
       const shadow = this.attachShadow({ mode: "open" })
       shadow.innerHTML = `<a><slot></slot></a><style> a{ text-decoration: none; font-size:20px; background:yellow;margin:20px;}</style>`
      }
     }
    )
   </script>

   <my-anchor>01525 7010235</my-anchor>
   <my-anchor>abcde ferfdee</my-anchor>
  </body>
</html>
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210525/0a527cf5/attachment-0001.htm>


More information about the webkit-unassigned mailing list