Default slot is media; slot=caption replaces the fallback caption. Both fallbacks use label. Text, document, live, and message modes use value and do not project either slot. Text wraps and scrolls within 60% of the viewport block size. Documents retain the browser’s native frame height and fill the available inline space. With fit="fill", a definite parent height sizes text/document/live/artifact-tree output to its panel. Document mode’s fixed empty sandbox, referrer policy, and deny-all content policy cannot be overridden through host attributes. Live mode uses a parent-owned script-free frame with explicit resources and independent theme styling.
Five theme modes
{cem-media-preview @label="Policy preview" |
{img @alt="Web Components emblem"
@src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22/%3E"}
{span @slot=caption | Policy document}
}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=text @label="Literal source" @value={"\u{3c}p\u{3e}Literal \u{26} text\u{3c}/p\u{3e}\n Indented line "}}```
}}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=document @label="Isolated document" @value={"\u{3c}h2\u{3e}Document preview\u{3c}/h2\u{3e}\u{3c}p\u{3e}Scripts, styles, and network access stay blocked.\u{3c}/p\u{3e}\u{3c}script\u{3e}document.body.textContent = 'Script executed'\u{3c}/script\u{3e}"}}```
}}
{cem-media-preview @label="Binary result" @mode=message
@value="Download the exact result to inspect binary output."}
{cem-media-preview @label="Policy preview" |
{img @alt="Web Components emblem"
@src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22/%3E"}
{span @slot=caption | Policy document}
}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=text @label="Literal source" @value={"\u{3c}p\u{3e}Literal \u{26} text\u{3c}/p\u{3e}\n Indented line "}}```
}}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=document @label="Isolated document" @value={"\u{3c}h2\u{3e}Document preview\u{3c}/h2\u{3e}\u{3c}p\u{3e}Scripts, styles, and network access stay blocked.\u{3c}/p\u{3e}\u{3c}script\u{3e}document.body.textContent = 'Script executed'\u{3c}/script\u{3e}"}}```
}}
{cem-media-preview @label="Binary result" @mode=message
@value="Download the exact result to inspect binary output."}
{cem-media-preview @label="Policy preview" |
{img @alt="Web Components emblem"
@src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22/%3E"}
{span @slot=caption | Policy document}
}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=text @label="Literal source" @value={"\u{3c}p\u{3e}Literal \u{26} text\u{3c}/p\u{3e}\n Indented line "}}```
}}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=document @label="Isolated document" @value={"\u{3c}h2\u{3e}Document preview\u{3c}/h2\u{3e}\u{3c}p\u{3e}Scripts, styles, and network access stay blocked.\u{3c}/p\u{3e}\u{3c}script\u{3e}document.body.textContent = 'Script executed'\u{3c}/script\u{3e}"}}```
}}
{cem-media-preview @label="Binary result" @mode=message
@value="Download the exact result to inspect binary output."}
{cem-media-preview @label="Policy preview" |
{img @alt="Web Components emblem"
@src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22/%3E"}
{span @slot=caption | Policy document}
}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=text @label="Literal source" @value={"\u{3c}p\u{3e}Literal \u{26} text\u{3c}/p\u{3e}\n Indented line "}}```
}}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=document @label="Isolated document" @value={"\u{3c}h2\u{3e}Document preview\u{3c}/h2\u{3e}\u{3c}p\u{3e}Scripts, styles, and network access stay blocked.\u{3c}/p\u{3e}\u{3c}script\u{3e}document.body.textContent = 'Script executed'\u{3c}/script\u{3e}"}}```
}}
{cem-media-preview @label="Binary result" @mode=message
@value="Download the exact result to inspect binary output."}
{cem-media-preview @label="Policy preview" |
{img @alt="Web Components emblem"
@src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22/%3E"}
{span @slot=caption | Policy document}
}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=text @label="Literal source" @value={"\u{3c}p\u{3e}Literal \u{26} text\u{3c}/p\u{3e}\n Indented line "}}```
}}
{cem-element |
{template @type=text/cem-ml | ```{cem-media-preview @mode=document @label="Isolated document" @value={"\u{3c}h2\u{3e}Document preview\u{3c}/h2\u{3e}\u{3c}p\u{3e}Scripts, styles, and network access stay blocked.\u{3c}/p\u{3e}\u{3c}script\u{3e}document.body.textContent = 'Script executed'\u{3c}/script\u{3e}"}}```
}}
{cem-media-preview @label="Binary result" @mode=message
@value="Download the exact result to inspect binary output."}