Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/custom element #7971

Closed
wants to merge 4 commits into from
Closed

Feat/custom element #7971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b4c306
fix(runtime-core): fix the loop end judgment of the updateCssVars fun…
Mar 11, 2023
6cdb77e
feat: Support for DefineCustomComponent passing into shadowRoot
Mar 28, 2023
c341485
feat(runtime-core): Support for DefineCustomComponent passing into sh…
Mar 28, 2023
9329e16
Merge branch 'feat/custom-element' of https://github.com/RicardoErii/…
Mar 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/runtime-core/src/componentOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@ import { LifecycleHooks } from './enums'
* }
* ```
*/
export interface ComponentCustomOptions {}
export interface ComponentCustomOptions {
shadowRoot?: boolean
}

export type RenderFunction = () => VNodeChild

Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/src/components/Teleport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,7 @@ function updateCssVars(vnode: VNode) {
const ctx = vnode.ctx
if (ctx && ctx.ut) {
let node = (vnode.children as VNode[])[0].el!
while (node !== vnode.targetAnchor) {
while (node && node !== vnode.targetAnchor) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This modification should have nothing to do with pr, I think this modification should be avoided

if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
node = node.nextSibling
}
Expand Down
26 changes: 18 additions & 8 deletions packages/runtime-dom/src/apiCustomElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export function defineCustomElement(
class VueCustomElement extends VueElement {
static def = Comp
constructor(initialProps?: Record<string, any>) {
super(Comp, initialProps, hydrate)
super(Comp, initialProps, hydrate, options.shadowRoot)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this options.shadowRoot is passed directly to sfc and uses script setup, how will it be set?

Copy link
Member

@baiwusanyu-c baiwusanyu-c May 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use this reference configuration method, use a config as a parameter to pass in the control #4404 , and if possible, I would like to add this pr change idea to unplugin-vue-ce

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much for your interest in this PR. I will seriously consider your suggestion, and I will think further about this PR. Thank!

}
}

Expand Down Expand Up @@ -169,23 +169,33 @@ export class VueElement extends BaseClass {
private _resolved = false
private _numberProps: Record<string, true> | null = null
private _styles?: HTMLStyleElement[]
private _root: ShadowRoot | HTMLElement

constructor(
private _def: InnerComponentDef,
private _props: Record<string, any> = {},
hydrate?: RootHydrateFunction
hydrate?: RootHydrateFunction,
shadowRoot?: boolean
) {
super()

if (this.shadowRoot && hydrate) {
hydrate(this._createVNode(), this.shadowRoot)
this._root = this.shadowRoot!
hydrate(this._createVNode(), this._root)
} else {
if (__DEV__ && this.shadowRoot) {
warn(
`Custom element has pre-rendered declarative shadow root but is not ` +
`defined as hydratable. Use \`defineSSRCustomElement\`.`
)
}
this.attachShadow({ mode: 'open' })
if (shadowRoot === false) {
this._root = this
} else {
this.attachShadow({ mode: 'open' })
this._root = this.shadowRoot!
}

if (!(this._def as ComponentOptions).__asyncLoader) {
// for sync component defs we can immediately resolve props
this._resolveProps(this._def)
Expand All @@ -208,7 +218,7 @@ export class VueElement extends BaseClass {
this._connected = false
nextTick(() => {
if (!this._connected) {
render(null, this.shadowRoot!)
render(null, this._root)
this._instance = null
}
})
Expand Down Expand Up @@ -341,7 +351,7 @@ export class VueElement extends BaseClass {
}

private _update() {
render(this._createVNode(), this.shadowRoot!)
render(this._createVNode(), this._root)
}

private _createVNode(): VNode<any, any> {
Expand All @@ -355,7 +365,7 @@ export class VueElement extends BaseClass {
instance.ceReload = newStyles => {
// always reset styles
if (this._styles) {
this._styles.forEach(s => this.shadowRoot!.removeChild(s))
this._styles.forEach(s => this._root.removeChild(s))
this._styles.length = 0
}
this._applyStyles(newStyles)
Expand Down Expand Up @@ -404,7 +414,7 @@ export class VueElement extends BaseClass {
styles.forEach(css => {
const s = document.createElement('style')
s.textContent = css
this.shadowRoot!.appendChild(s)
this._root.appendChild(s)
// record for HMR
if (__DEV__) {
;(this._styles || (this._styles = [])).push(s)
Expand Down