O React viola os padrões DOM?

Existe um site bastante popular https://custom-elements-everywhere.com que mostra como os componentes da web funcionam em diferentes estruturas. Quase todos os frameworks têm um belo resultado de 100% lá, mas o React tem um alarmante 71% lá:

Muitos usuários olham para esta página e concluem que o React não apenas oferece suporte insuficiente aos componentes da web, mas também à API DOM em geral. É assim? É muito ruim?

Vamos descobrir!

Analisando testes

A classificação é calculada com base em testes. É aqui que o resultado é mostrado . Há 15 testes no total, 7 deles estão quebrados, portanto, recebemos uma classificação sem importância. Os seguintes testes foram quebrados:

• atributos e propriedades

  
  
  
  
  

  • irá passar os dados do array como uma propriedade

    
    
    
    
    

  • irá passar os dados do objeto como uma propriedade

    
    
    
    
    

• eventos

  
  
  
  
  

  • pode ouvir declarativamente um evento DOM em minúsculas despachado por um elemento personalizado

    
    
    
    
    

  • pode ouvir declarativamente um evento DOM kebab-case despachado por um elemento personalizado

    
    
    
    
    

  • pode ouvir declarativamente um evento camelCase DOM despachado por um elemento personalizado

    
    
    
    
    

  • pode ouvir declarativamente um evento CAPScase DOM despachado por um elemento personalizado

    
    
    
    
    

  • pode ouvir declarativamente um evento PascalCase DOM despachado por um elemento personalizado

    
    
    
    
    

, , . . 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" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Nossa caixa de texto está quebrada! A tag do rótulo interno não conseguiu se comunicar com a tag de entrada porque eles estão em instâncias diferentes do ShadowDOM. Existe uma proposta desenhada para resolver este problema , mas ainda é incipiente e não funciona em nenhum dos navegadores (lembre-se, os componentes web são desenvolvidos há quase 10 anos). E no momento , não será possível implementá- custom-label



lo custom-input



na forma de componentes web, observando os requisitos de acessibilidade.

Portanto, pense por si mesmo qual tecnologia é uma violação real dos padrões da web.