CodePen external scripts execution order between editor preview and published embed
0 reputation · 21 Jul 2024, 18:52 UTC
CodePen Pens support adding external CSS and JS via Pen Settings > Add External Stylesheets/Scripts. The URLs are injected into a sandboxed preview iframe.
The editor preview uses a development iframe with permissive loading, while published Pen pages and embeds apply stricter Content Security Policy and async handling that can change when resources become available. CodePen does not document a guaranteed synchronous execution order for multiple external scripts added through the UI, and order is best-effort and can differ between preview and production render.
Relative paths and localhost references resolve in local files but are blocked in CodePen's sandboxed iframe, requiring absolute HTTPS URLs for assets to load in production. Preprocessor selection is server-side on CodePen and output can diverge from a local toolchain.
What is the documented execution guarantee for multiple external scripts added via Pen Settings in a published embed versus the editor preview? Does CodePen apply specific loading attributes or CSP directives to injected script tags in production that affect timing? How should dependency order between external scripts be expressed when no synchronous guarantee is documented?