Tumblr 테마 Vue → Web Components 마이그레이션

NPF 데이터는 <script type="application/json" data-npf>에 저장. 컴포넌트에서 closest로 포스트 컨테이너 찾아서 참조 (React Context 패턴과 유사).

<div id="{PostID}" data-type="{PostType}">
  {block:Text}
  <script type="application/json" data-npf>
    {NPF}
  </script>
  <tumblr-npf-media></tumblr-npf-media>
  <tumblr-npf-text></tumblr-npf-text>
  {/block:Text}
</div>

// 데이터 참조
const post = this.closest('[id][data-type]')
const npf = JSON.parse(post.querySelector('script[data-npf]').textContent)

// 렌더링 - createElement 사용 (Tumblr 템플릿 ${} 충돌 회피)
const img = document.createElement('img')
img.src = imageURL
this.appendChild(img)

제약: {NPF}는 Text 포스트에서만 사용 가능. Photo는 기존 Tumblr 변수 사용.