React enfreint-il les normes DOM?

Il existe un site assez populaire https://custom-elements-everywhere.com qui montre comment les composants Web fonctionnent dans différents frameworks. Presque tous les frameworks ont un beau résultat à 100% là-bas, mais React y a un 71% très alarmant:

De nombreux utilisateurs consultent cette page et concluent que React ne prend pas seulement mal en charge les composants Web, mais également l'API DOM en général. Est-ce vrai? Est-ce vraiment mauvais?

Découvrons-le!

Analyser les tests

La cote est calculée sur la base de tests. C'est là que le résultat est affiché . Il y a 15 tests au total, 7 d'entre eux sont cassés, nous obtenons donc une note si insignifiante. Les tests suivants sont cassés:

• attributs et propriétés

  
  
  
  
  

  • transmettra les données du tableau en tant que propriété

    
    
    
    
    

  • transmettra les données d'objet en tant que propriété

    
    
    
    
    

• événements

  
  
  
  
  

  • peut écouter de manière déclarative un événement DOM en minuscules distribué par un élément personnalisé

    
    
    
    
    

  • peut écouter de manière déclarative un événement DOM kebab-case distribué par un élément personnalisé

    
    
    
    
    

  • peut écouter de manière déclarative un événement DOM camelCase distribué par un élément personnalisé

    
    
    
    
    

  • peut écouter de manière déclarative un événement DOM CAPScase distribué par un élément personnalisé

    
    
    
    
    

  • peut écouter de manière déclarative un événement DOM PascalCase distribué par un élément personnalisé

    
    
    
    
    

, , . . 71% , 90% 15% , - .

, - , . - Github:

• - React.

  
  
  
  
  

• .

  
  
  
  
  

" " ? .

:

<input type="checkbox" checked={checked} onChange={handleChange} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. - :

<custom-checkbox checked={checked} onChange={handleChange} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, on*



React . ( ) . , Sebastian Markbåge ( React) . :

, . , touch- , , , , "" , .. , .

, , . , , , . , . DOM-, _ _ , . DOM- (refs) .

, React DOM-, , React ( Concurrent mode), Refs API:

function CustomCheckbox({ checked, handleChange }) {
	const ref = useRef();

	useEffect(() => {
		ref.current.addEventListener("change", handleChange);
		return () => ref.current.removeEventListener("change", handleChange);
  }, [handleChange]);
  
	return <custom-checkbox ref={ref} />;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, custom-elements-everywhere? , . , , / .

?

" -" . , - JSX . , ( JSON.stringify) :

<user-view user="{user}" />
<!--  <user-view user="[object Object]" /> -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. React DOM - . DOM- , . React- :

function UserView({ user }) {
	const ref = useRef();
	//      user
	useEffect(() => (ref.current.user = user), [user]);

	return <user-view ref={ref} />;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , JSX , :

/** @jsx h */
import { createElement } from "react";
import val from "@skatejs/val";

const h = val(createElement);

function Checkbox({ checked, handleChange }) {
	// !
	return <custom-checkbox checked={checked} onChange={handleChange} />;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , Google Developer Advocates , , . , React DOM ( ).

100%

100% . ? !. ( new CustomEvent('!')



)?

. , Angular . materials-components-web : MDCSlider:change



. Google (Angular) (Material design). , – DOM-.

, , - React 71% , Angular 100%. .

, . . , DOM – . , custom-elements-everywhere .

c custom-elements-everywhere, React DOM API -. , :

1. onChange React DOM- change. , [Github issue](https://github.com/facebook/react/issues/9657). React, React - , , onChange React – .

   
   
   
   
   

2. onFocus/onBlur . DOM API, focus, , . React , focusin. issue.

   
   
   
   
   

3. . , , . Portal API React-. DOM-, .

   
   
   
   
   

, . , , , React , () - DOM API , React (, react-focus-lock).

- . label. for id :

<label for="name"> </label>
<input id="name" name="firstName" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. React :

const id = useUniqueId();

<Label for={id}> </Label>
<Input id={id} name="firstName" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Label Input html- .

React, -:

<custom-label for="name"> </custom-label>
<custom-input id="name" name="firstName" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Notre zone de texte est cassée! La balise d'étiquette interne n'a pas pu communiquer avec la balise d'entrée car elles se trouvent sur différentes instances ShadowDOM. Il existe une proposition conçue pour résoudre ce problème , mais elle en est encore à ses balbutiements et ne fonctionne dans aucun des navigateurs (rappelez-vous, les composants Web sont développés depuis près de 10 ans). Et à l'heure actuelle , il ne sera pas possible de mettre en œuvre custom-label



ce custom-input



sous la forme de composants Web, en respectant les exigences en matière d'accessibilité.

Alors, pensez par vous-même quelle technologie est une véritable violation des normes du Web.