Bug 226245 - Slot elements (Web Components v1) containing only digits bug
Summary: Slot elements (Web Components v1) containing only digits bug
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: JavaScriptCore (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad iOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2021-05-25 15:59 PDT by timonson
Modified: 2021-06-01 23:58 PDT (History)
2 users (show)

See Also:


Attachments
Check rendered elements and DOM in Dev Tools (119.91 KB, image/png)
2021-05-25 15:59 PDT, timonson
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description timonson 2021-05-25 15:59:53 PDT
Created attachment 429704 [details]
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>
```
Comment 1 timonson 2021-05-25 16:08:33 PDT
What is even more confusing, if the slot element is rendered correctly also depends on the length of the digits string. But I can't determine a certain metric.
Comment 2 timonson 2021-05-25 21:16:51 PDT
When I was talking in OP about the first slot I meant the second slot and vice versa.
Comment 3 Radar WebKit Bug Importer 2021-06-01 16:00:19 PDT
<rdar://problem/78736879>
Comment 4 Ryosuke Niwa 2021-06-01 16:05:00 PDT
Ah, this is a data detector feature detecting those numbers as phone numbers & trying to turn it into a tel link.
Comment 5 timonson 2021-06-01 22:04:20 PDT
But this is not expected/desired behavior in this context, right?
Comment 6 Ryosuke Niwa 2021-06-01 23:14:40 PDT
(In reply to timonson from comment #5)
> But this is not expected/desired behavior in this context, right?

The fact the number is wrapped by an anchor element? That is Data Detector feature working as intended.
Comment 7 timonson 2021-06-01 23:51:25 PDT
Let me clarify my question: Although the Data Detector feature might be working as intended, is this really the desired behavior overall considering that no other browser is behaving like this? If it is I would appreciate a reference to the spec which defines it. Thanks!
Comment 8 Ryosuke Niwa 2021-06-01 23:54:53 PDT
(In reply to timonson from comment #7)
> Let me clarify my question: Although the Data Detector feature might be
> working as intended, is this really the desired behavior overall considering
> that no other browser is behaving like this? If it is I would appreciate a
> reference to the spec which defines it. Thanks!

Well, it's a feature so that users can click on a phone number & be able to make a phone call easily. There isn't really any spec for this just like Chrome & Safari both support translation as a browser feature and replace page content when it's used.
Comment 9 timonson 2021-06-01 23:58:54 PDT
I think you have not fully understood the bug report yet what is probably my fault. Please replicate my example and you will see that the slot element with the phone number is fully taken out of the normal DOM context where a slot element should be. When you change the CSS you will see that one slot element reacts to CSS (not only text-decorator) and the other doesnt at all. Please take another look at the DOM context and where/how the slot elements are put differently.