Class: MyopExtractedWebComponent
Defined in: host/components/myopExtractedWebComponent.ts:14
Component wrapper for Myop Web Components that are extracted from HTML and run directly on the host document (not in an iframe).
These components use the native Web Components API (Custom Elements + Shadow DOM) and communicate via direct method calls and CustomEvents instead of postMessage.
Extends
Constructors
new MyopExtractedWebComponent()
new MyopExtractedWebComponent(
componentDefinition,skin,container,customElement,tagName,options?):MyopExtractedWebComponent
Defined in: host/components/myopExtractedWebComponent.ts:33
Parameters
componentDefinition
skin
container
HTMLElement
customElement
HTMLElement
tagName
string
options?
Returns
Overrides
Properties
_markedForDisposed
_markedForDisposed:
boolean=false
Defined in: host/components/IMyopComponent.ts:179
Inherited from
BaseMyopComponent._markedForDisposed
_whenInitiated
_whenInitiated:
Promise<any>
Defined in: host/components/IMyopComponent.ts:283
Inherited from
BaseMyopComponent._whenInitiated
_whenInitiatedReject()?
optional_whenInitiatedReject: (value?) =>any
Defined in: host/components/IMyopComponent.ts:281
Parameters
value?
any
Returns
any
Inherited from
BaseMyopComponent._whenInitiatedReject
_whenInitiatedResolve()?
optional_whenInitiatedResolve: (value?) =>any
Defined in: host/components/IMyopComponent.ts:280
Parameters
value?
any
Returns
any
Inherited from
BaseMyopComponent._whenInitiatedResolve
cleanupInspect
cleanupInspect:
CleanupHandler
Defined in: host/components/myopExtractedWebComponent.ts:119
componentDefinition
componentDefinition:
IComponentDefinitionConfig
Defined in: host/components/IMyopComponent.ts:143
Inherited from
BaseMyopComponent.componentDefinition
container
container:
HTMLElement
Defined in: host/components/myopExtractedWebComponent.ts:36
Inherited from
element?
optionalelement:HTMLElement
Defined in: host/components/IMyopComponent.ts:141
Inherited from
id
id:
string=''
Defined in: host/components/IMyopComponent.ts:137
Inherited from
isInitiated
isInitiated:
boolean=false
Defined in: host/components/IMyopComponent.ts:278
Inherited from
messageHandlers
messageHandlers:
Record<string,messageHandler<any>[]> ={}
Defined in: host/components/IMyopComponent.ts:139
Inherited from
BaseMyopComponent.messageHandlers
props
props:
any
Defined in: host/components/IMyopComponent.ts:418
Inherited from
refs
refs:
RefTypes
Defined in: host/components/IMyopComponent.ts:419
Inherited from
Accessors
markedForDisposed
Get Signature
get markedForDisposed():
boolean
Defined in: host/components/IMyopComponent.ts:181
Returns
boolean
Set Signature
set markedForDisposed(
value):void
Defined in: host/components/IMyopComponent.ts:185
Parameters
value
boolean
Returns
void
Inherited from
BaseMyopComponent.markedForDisposed
uiTags
Get Signature
get uiTags():
string[]
Defined in: host/components/IMyopComponent.ts:175
Runtime tags: only tags named ui:... (e.g. ui:beta). [] when there are none.
Returns
string[]
Runtime tags: only tags named ui:... (e.g. ui:beta). [] when there are none.
Inherited from
Methods
bind()
bind<
T>(messageType,handler):void
Defined in: host/components/IMyopComponent.ts:199
Type Parameters
• T extends BaseMyopMessage
Parameters
messageType
string
handler
(message) => boolean
Returns
void
Inherited from
bindWhen()
bindWhen<
T>(messageType,predicate,handler):CleanupHandler
Defined in: host/components/IMyopComponent.ts:210
Type Parameters
• T extends BaseMyopMessage
Parameters
messageType
string
predicate
(message) => boolean
handler
(message) => void
Returns
Inherited from
dispose()
dispose():
void
Defined in: host/components/myopExtractedWebComponent.ts:199
Returns
void
Overrides
getData()
getData():
unknown
Defined in: host/components/myopExtractedWebComponent.ts:156
Get current data from the component
Returns
unknown
hide()
hide():
void
Defined in: host/components/myopExtractedWebComponent.ts:126
Returns
void
Overrides
initiated()
initiated():
Promise<any>
Defined in: host/components/IMyopComponent.ts:288
Returns
Promise<any>
Inherited from
initWithData()
initWithData(
data):void
Defined in: host/components/myopExtractedWebComponent.ts:147
Initialize the component with data by calling myop_init_interface directly
Parameters
data
unknown
Returns
void
inspect()
inspect():
CleanupHandler
Defined in: host/components/myopExtractedWebComponent.ts:121
Returns
Overrides
observeAutoSize()
observeAutoSize(
options?):CleanupHandler
Defined in: host/components/myopExtractedWebComponent.ts:75
Data-out for size — the extracted counterpart of the iframe implementation.
THIS EXISTED ONLY ON MyopIframeComponent, and that was invisible for as long as
minification was sending every v2 component down the iframe path. Restoring v2
detection moves them to this class, and @myop/react drives both through one
wrapper: in content mode it hides its loader from the FIRST onSizeChange, so a
component whose class has no observeAutoSize leaves a React host on a loader
forever. Pic-Time's sizeMeta is width:100% with no height, which is exactly content
mode. Caught by v2-data-contract D8 (API parity).
It REPORTS rather than imposes. An iframe has no intrinsic size and must be measured inside and then set from outside; a custom element sizes itself from its own content, so the honest thing is to measure it and tell the host, and let the host decide. React then uses width:100% and the measured height.
The one thing it does impose is display: block when the element computes to
inline, which is the default for a custom element and measures as zero height no
matter what it contains. The iframe path forces width:100% for the same reason —
without it the first measurement is 0 and the host sizes the component to nothing.
Parameters
options?
Returns
onMessageReceived()
onMessageReceived(
incomeMessage):boolean
Defined in: host/components/IMyopComponent.ts:240
Parameters
incomeMessage
Returns
boolean
Inherited from
BaseMyopComponent.onMessageReceived
send()
send(
message):CleanupHandler
Defined in: host/components/myopExtractedWebComponent.ts:188
For compatibility with message-based components. Web components don't use postMessage, so this is a no-op for most messages.
Parameters
message
Returns
Overrides
setCtaHandler()
setCtaHandler(
handler):void
Defined in: host/components/myopExtractedWebComponent.ts:167
Set CTA handler - unified API with iframe components. Called via props.myop_cta_handler = handler
Parameters
handler
(action, payload) => void
Returns
void
setInitiated()
setInitiated():
void
Defined in: host/components/IMyopComponent.ts:271
Returns
void
Inherited from
BaseMyopComponent.setInitiated
show()
show():
void
Defined in: host/components/myopExtractedWebComponent.ts:135
Returns
void