Verstößt React gegen DOM-Standards?

Es gibt eine ziemlich beliebte Website https://custom-elements-everywhere.com, die zeigt, wie Webkomponenten in verschiedenen Frameworks funktionieren. Fast alle Frameworks haben dort ein schönes 100% iges Ergebnis, aber React hat dort sehr alarmierende 71%:

Viele Benutzer sehen sich diese Seite an und kommen zu dem Schluss, dass React nicht nur Webkomponenten, sondern auch die DOM-API im Allgemeinen schlecht unterstützt. Ist es so? Ist es wirklich schlimm

Lass es uns herausfinden!

Tests analysieren

Die Bewertung wird anhand von Tests berechnet. Hier wird das Ergebnis angezeigt . Insgesamt gibt es 15 Tests, von denen 7 fehlerhaft sind, daher erhalten wir eine so unwichtige Bewertung. Die folgenden Tests sind fehlerhaft:

• Attribute und Eigenschaften

  
  
  
  
  

  • Übergibt Array-Daten als Eigenschaft

    
    
    
    
    

  • Übergibt Objektdaten als Eigenschaft

    
    
    
    
    

• Veranstaltungen

  
  
  
  
  

  • kann deklarativ ein DOM-Ereignis in Kleinbuchstaben abhören, das von einem benutzerdefinierten Element ausgelöst wird

    
    
    
    
    

  • kann deklarativ ein Kebab-Case-DOM-Ereignis abhören, das von einem benutzerdefinierten Element ausgelöst wird

    
    
    
    
    

  • kann deklarativ ein camelCase DOM-Ereignis abhören, das von einem benutzerdefinierten Element ausgelöst wird

    
    
    
    
    

  • kann deklarativ ein CAPScase DOM-Ereignis abhören, das von einem benutzerdefinierten Element ausgelöst wird

    
    
    
    
    

  • kann deklarativ ein PascalCase-DOM-Ereignis abhören, das von einem benutzerdefinierten Element ausgelöst wird

    
    
    
    
    

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Unser Textfeld ist kaputt! Das innere Label-Tag konnte nicht mit dem Eingabe-Tag kommunizieren, da sie sich auf verschiedenen ShadowDOM-Instanzen befinden. Es gibt einen Vorschlag zur Lösung dieses Problems , der jedoch noch in den Kinderschuhen steckt und in keinem der Browser funktioniert (denken Sie daran, dass Webkomponenten seit fast 10 Jahren entwickelt wurden). Und im Moment wird es nicht möglich sein, custom-label



es custom-input



in Form von Webkomponenten zu implementieren , wobei die Barrierefreiheitsanforderungen zu beachten sind.

Überlegen Sie sich also, welche Technologie einen echten Verstoß gegen Webstandards darstellt.