---
type: snippet
tags: [tumblr, web-components, npf]
status: release
ctime: 2025-12-28
mtime: 2025-12-28
---

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

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

```html
<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>
```

```javascript
// 데이터 참조
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 변수 사용.