Avoid attachInternals on customised built-ins

stephband · Dec 12, 2024 · 16bb1b6 · 16bb1b6
1 parent 7132f45
commit 16bb1b6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 32 deletions.
diff --git a/modules/element-1/internals.js b/modules/element-1/internals.js
@@ -4,29 +4,22 @@ import create from '../create.js';
 
 const $internals = Symbol('internals');
 
-function attachInternals(element) {
-    var internals;
-
-    // Use native attachInternals where it exists
-    if (element.attachInternals) {
-        internals = element.attachInternals();
-        if (internals.setFormValue) {
-            return internals;
-        }
-    }
-    else {
-        internals = {
-            shadowRoot: elem.shadowRoot
-        };
-    }
+function attachFormInternals(element) {
+    // Use native attachInternals() where it exists. Native internals can only
+    // be got on autonomous custom elements.
+    const internals = (element.attachInternals && !element.getAttribute('is')) ?
+        element.attachInternals() :
+        { shadowRoot: element.shadowRoot } ;
+
+    if (internals.setFormValue) return internals;
 
     // Otherwise polyfill it with a pseudo internals object, actually a hidden
     // input that we put inside element (but outside the shadow DOM). We may
     // not yet put this in the DOM however – it violates the spec to give a
     // custom element children before it's contents are parsed. Instead we
     // wait until connectCallback.
     internals.polyfillInput = create('input', { type: 'hidden', name: elem.name });
-    elem.appendChild(internals.polyfillInput);
+    element.appendChild(internals.polyfillInput);
 
     // Polyfill internals object setFormValue
     internals.setFormValue = function(value) {
@@ -38,8 +31,10 @@ function attachInternals(element) {
 
 export function createInternals(Element, element, shadow) {
     return (element[$internals] = Element.formAssociated ?
-        attachInternals(element) :
-        { shadowRoot: shadow }
+        attachFormInternals(element) :
+    (element.attachInternals && !element.getAttribute('is')) ?
+        element.attachInternals() :
+        { shadowRoot: shadow } ;
     );
 }
 

diff --git a/modules/element/internals.js b/modules/element/internals.js
@@ -4,15 +4,16 @@ import create from '../create.js';
 
 const $internals = Symbol('internals');
 
+// TODO: No longer needed polyfill for Safari... ??
+/*
 function attachInternals(element) {
     var internals;
 
-    // Use native attachInternals where it exists
-    if (element.attachInternals) {
-        internals = element.attachInternals();
-        if (internals.setFormValue) {
-            return internals;
-        }
+    // Use native attachInternals where it exists and we have the right to use
+    // it - you cannot attachInternals to customised built-ins
+    if (element.attachInternals && !element.getAttribute('is')) {
+        return element.attachInternals();
+        //if (internals.setFormValue) return internals;
     }
     else {
         internals = {
@@ -25,13 +26,12 @@ function attachInternals(element) {
     // not yet put this in the DOM however – it violates the spec to give a
     // custom element children before it's contents are parsed. Instead we
     // wait until connectCallback.
-    internals.polyfillInput = create('input', { type: 'hidden', name: elem.name });
-    elem.appendChild(internals.polyfillInput);
-
+    //internals.polyfillInput = create('input', { type: 'hidden', name: elem.name });
+    //elem.appendChild(internals.polyfillInput);
     // Polyfill internals object setFormValue
-    internals.setFormValue = function(value) {
-        this.input.value = value;
-    };
+    //internals.setFormValue = function(value) {
+    //    this.input.value = value;
+    //};
 
     return internals;
 }
@@ -42,8 +42,14 @@ export function createInternals(Element, element, shadow) {
         { shadowRoot: shadow }
     );
 }
+*/
+
+export function createInternals(Element, element, shadow) {
+    return element[$internals] = (element.attachInternals && !element.getAttribute('is')) ?
+        element.attachInternals() :
+        { shadowRoot: shadow } ;
+}
 
 export function getInternals(element) {
-    // Default to an empty object
-    return element[$internals];// || (element[$internals] = {});
+    return element[$internals];
 }