게시글 URL 앵커를 수정하는 웹 컴포넌트를 포함하는 테마 컴포넌트가 브라우저를 동결시킴

개발
1

여러분 안녕하세요,

멋진 mermaid 테마 컴포넌트를 가져와서 RapiDoc을 웹 컴포넌트로 포함하도록 수정했습니다. 이를 통해 OpenAPI 스펙을 렌더링할 수 있습니다.

웹 컴포넌트에서 작업을 클릭하면 가끔 브라우저가 멈추는 현상이 발생하고, 무슨 일이 일어나고 있는지 파악하기가 어렵습니다.
탭을 닫아야만 해결됩니다. 동일한 RapiDoc 버전과 동일한 OpenAPI 스펙을 다른 페이지에 임베드했을 때는 이런 문제가 발생하지 않습니다.

구체적으로 URL에 작업 ID를 앵커로 추가하는 동작을 수행합니다. 예를 들어 https://my-site/t/my-topic/150#post-/clusters/-clusterID-/gateway와 같습니다. URL 변경 사항을 청취하는 어떤 것이 이 경우 실패하는 것 같습니다. 아마도 웹 컴포넌트가 완전히 렌더링되지 않았거나, 그리고/또는 shadow DOM에서 해당 ID를 찾을 수 없기 때문일 것으로 _추측_합니다.

콘솔에서 다음 내용을 확인했습니다:

Promise Rejection: SyntaxError: '#main #put-/clusters/-clusterID-/appliances/-applianceID-/constraints, a[name=put-/clusters/-clusterID-/appliances/-applianceID-/constraints]' is not a valid selector.

URL의 앵커에 해당하는 ID를 가진 삽입된 요소는 다음과 같은 형태입니다.

<section 
  part="section-endpoint" 
  id="patch-/clusters/-clusterID-" 
  class="m-endpoint regular-font patch collapsed">

이 문제의 핵심을 파악하는 데 도움이 될 만한 힌트를 가지고 계신 분이 있을까요?

매우 감사합니다!

2

내가 내 질문에 답을 해보겠습니다: 결국 Discourse와는 아무 관련이 없었던 것 같습니다.
특정 파라미터 조합이 웹 컴포넌트를 scheduleUpdate 루프에 빠뜨렸습니다.
소란을 피운 점 죄송합니다.

참고로, 제가 한 작업은 다음과 같습니다:

  • 테마 컴포넌트에서 미미니파케이션(minified)되지 않은 rapidoc 버전을 사용했습니다.
  • 사이트가 멈춰 있는 동안 디버거를 사용했습니다.
  • 호출 스택(call-stack)을 확인하여 반복적인 업데이트를 유발하는 원인을 찾았습니다(show-curl-before-try).
  • rapidoc의 파라미터를 변경하여 더 이상 이 시나리오가 발생하지 않도록 했습니다.

이 주제가 토론에 도움이 되지 않거나 관련이 없다고 느끼시면 삭제해 주셔도 됩니다.

어쨌든 감사드리고, 다시 한번 소란을 피운 점 죄송합니다.