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

Ability to customize Portal #13

Open
ChristianKienle opened this issue May 4, 2019 · 2 comments
Open

Ability to customize Portal #13

ChristianKienle opened this issue May 4, 2019 · 2 comments
Labels
feature

Comments

@ChristianKienle
Copy link
Collaborator

I would like to customize the HTML generated by the Portal/Container. Currently:

<portal selector="#aaa" tag="span">…</portal>

generates roughly the following HTML:

<body>
  <div id="app">…</div>
  <span id="aaa">…</span>

In my case, I would like to apply certain attributes to my span-element that has the id aaa).

<portal class="helloWorld" selector="#aaa" tag="span">…</portal>

Generates the exact same HTML. Setting class has no effect.

I had a look at the code and I think I see why. The span-element is created "manually" by using createElement. Thus "syncing" all attributes applied to the portal-instance to the manually created element is a lot of work.

But maybe I am missing something. :D

I would love to help and contribute code and a PR. But before I dig in deeper could you elaborate on that? Is the idea in general bad?
@LinusBorg
Copy link
Owner

Syncing Attributes wouldn't be too hard using $attrs I think.

Except that the class attribute isn't included in $attrs (we will change that in Vue 3) and would likely be the single most used attribute, so we would have to introduce a special prop for that.

While we are at it we could just define a general targetAttrs prop on the portal that we then apply to the element.

Making that reactive would require additional work with a watcher, and provide a small challenge when it comes to remove attributes that are no longer included in the updated prop.

I'm generally open to such a feature provided that we can add it with not too much code. After all, the goal of this library is to be really small by being focused on a core usecase.

Sidenote: I think you're aware but nothing prevents you from creating your own target element (containing any attributes and whatnot that you want) and passing a selector matching that element to the portal. The portal will use the existing element and not create a new one.

@y-nk
Copy link

y-nk commented Jun 27, 2019

Could it be possible to pass along a component to be rendered as the portal target ? Such as : Vue.use(SimplePortal, { blueprint: MyAwesomePortalReceiver }) ? That would allow to add backdrop and stuff without your implementation to relay on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ChristianKienle @y-nk @LinusBorg