Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Docs: rendering framework components as step content, and why DOM injection belongs in when.show

オープン 初心者向け
  • 何か問題がありますか？
#3,479 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 4 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
84/100
issue の種類
ドキュメント
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
javascript
領域
documentation, frontend

調査の方向性

docs-src/src/content/docs/recipes/cookbook.md と、そこに既存する progress-indicator 用の when.show レシピから始めます。shepherd-text.ts で参照されている Step のライフサイクルと framework component の動作を読み、live HTMLElement コンテンツ、オプションのダイアログ chrome、hook のタイミング、関数ベースの this、step ごとの when の置き換え、スコープ付きの getElement クエリをドキュメント化します。cookbook が両方のパターンとその理由を、実用的な例とともに説明していれば完了です。

索引モデルが issue の本文から書いたものです。

説明

documentation

Split out of #2533 and #3216. Both reporters hit the same documentation gap from different directions, and both waited a long time for an answer that should have been a docs link.

What's missing

1. Rendering a framework component as step content.

StepText accepts an HTMLElement, and shepherd-text.ts appends it directly rather than serialising it — so you can mount a live Vue/React/Svelte component to a detached node and hand that node to text, keeping reactivity and event handlers intact. Nothing in the docs says this. #2533 asked for it in Dec 2023, was told "pass HTML", asked for a demo, and never got one.

Worth documenting alongside it: the dialog chrome is Shepherd's own DOM, but everything inside is opt-out — no title/cancelIcon means no header, an empty buttons array means no footer, and arrow: false drops the arrow. With those off a component owns the entire body, which is what people asking this question actually want.

2. Why custom footer/DOM injection has to happen in when.show.

The step element is torn down and rebuilt on every show (_teardownElements() / _setupElements()), and createShepherdFooter builds a fresh <footer> each time. So a one-time DOM injection cannot survive a step change. #3216 spent a retry loop and a setTimeout ladder working around this without ever being told the element is simply recreated.

Two sharp edges belong in the same section:

  • Inside when.show, this is the Step — an arrow function silently breaks this.getElement().
  • A per-step when replaces defaultStepOptions.when wholesale (shallow Object.assign in _setOptions).
  • Scope queries with this.getElement() rather than document.querySelector, which returns the first match in document order and will find a previous step's node, since hidden steps stay attached.
Suggested home

docs-src/src/content/docs/recipes/cookbook.md already demonstrates the when.show pattern for progress indicators without explaining why it must be that hook — extending that recipe and adding a "custom content / framework components" entry would cover both.

主要言語
JavaScript
スター
13.8k
フォーク
658
平均マージ
2日 15時間
マージ済み PR（30日）
14

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

shipshapecode/shepherd のほかの issue

shipshapecode/shepherd の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。