WebComponent에 하위 요소를 표시하는 방법

Question

React에 대한 종속성을 없애기 위해 React 구성 요소를 WebComponent로 다시 빌드하려고 합니다.

HTML에서 다음과 같은 WebComponent를 보고 싶습니다.

<editable-h1>안녕하세요, 세계</editable-h1>

다음과 같아야 합니다.

  
안녕하세요, 세상
  수정

수정 버튼을 클릭하면 다음과 같이 나타나기를 원합니다. 

  
  <버튼 onClick=this.onSave>저장

저장 버튼을 클릭하면 API 호출을 통해 변경 사항이 데이터베이스에 저장되고 원래 렌더링으로 돌아갑니다(단, 텍스트는 이미 편집된 상태로). 
저는 렌더링 전환과 API 호출을 처리할 수 있다고 생각하지만, 렌더링하기 위해 초기 WebComponent에서 하위 요소 텍스트 "Hello, world"를 가져오는 방법에 대해 혼란스럽습니다. 

Answer 1

<editable-h1>上触发connectedCallback이벤트

에서 태그 열기

그래서 여러분의 Hello World의 innerHTML은 아직 구문 분석되지 않았습니다

실행하기 전에 구문 분석이 완료될 때까지 기다리려면 setTimeout

을 사용하세요.

참고: 모두 제공됩니다parsedCallback的工具和库都会在底层使用类似的技巧，使用requestAnimationFrame或MutationObserver(및 더 많은 코드 줄).

한 줄 setTimeout是一个hack，或者你不想使用setTimeout이 해킹이라고 생각하거나 를 사용하여 밀리초를 낭비하고 싶지 않다면 Andrea Giammarchi의 html-parsed-element 코드

를 확인해 보세요. (물론 로딩과 파싱이 필요하고 이로 인해 종속성과 코드 복잡성도 증가하므로 전체적으로 시간이 더 걸립니다)

WC 전문가를 따라가면 이 토론이 계속됩니다. 하위 요소가 변경되거나 파싱이 완료된 후 실행될 콜백 함수가 필요합니다 https://github.com/WICG/webcomComponents/issues/809

모든 방법은 결국 같은 목표로 귀결됩니다: 이벤트 루프가 비어 있을 때까지 기다리세요

이벤트 루프란 무엇인가요? https://www.youtube.com/watch?v=8aGhZQkoFbQ

으아악 으아악 🎜