Vuetify + Web Component + ShadowDOM = Not rendering correctly - javascript

Has anyone created a custom web component in VueJS2 + Vuetify2 and managed to get ShadowDOM working?
I've tried two packages so far:
vue-custom-element - This works but only when ShadowDOM is disabled.
vue-web-component-wrapper - This package has ShadowDOM on by default and doesn't render any of the Vuetify components.
Here is a screenshot of how the web component should look (this doesn't have ShadowDOM enabled):
And this is how it's rendering with ShadowDOM enabled:

Related

How to use native slots in react?

I'm trying to build a simple application with react and web components UI library.
This library uses named slots in order to populate areas in the component.
When trying to use a named slot like this in my template:
<div slot="app-content"></div>
The rendered output is without the slot: <div></div>
Minimal reproduction:
Just add <div slot="mySlot" id="mySlottedDiv"></div> to a react component's template. Then inspect the resulting HTML and see that the slot attribute is omitted.
Here's an example of such an app: https://codesandbox.io/s/vivid-spring-hack-react-example-forked-yu9dss?file=/index.js
In this file, you can see I'm setting a div with slot="app-content" but the resulting HTML removes the attribute from the div - hence preventing me from using the web component's API.
Is there a way to force react NOT to remove attributes from an element? Is this a bug in react?
It seems like there are some issues opened and closed on some libraries trying to integrate with react to support slot attribute properly.
This seems to be a solution that circumvents react whitelisted attributes:
function slot(name = "") {
return { ref: (e) => e.setAttribute("slot", name) };
}
and then render:
<div {...slot("app-content")}>
This seems to work.
Here there are some more info: https://github.com/skatejs/skatejs/issues/1096
https://codesandbox.io/s/vivid-spring-hack-react-example-forked-nik1hs?file=/index.js
Ok, apparently this is working in react version 16 and above. Here's the blog post that explains that:
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
In my case, it is solved by upgrading react.

Warning: Extra attributes from the server using Custom Web Components

in my company we have a component library build with stencil. And now we want to move some websites to next.js.
I created a new next.js project and referenced the needes javascript files for my web-components.
The components are displayed but i get the warning:
"Warning: Extra attributes from the server [...]"
Can someone explain why this occurs and maybe how to tell next.js there is nothing wrong happening?
The full Error is:
Extra attributes from the server: class
at my-ui-icon
at a
at li
at ul
at div
at div
at div
at nav
at div
at Navbar (webpack-internal:///./components/navbar.js:35:157)
at div
at Layout (webpack-internal:///./components/layout.js:37:157)
at MyApp (webpack-internal:///./pages/_app.js:21:24)
at ErrorBoundary (webpack-internal:///./node_modules/#next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
at ReactDevOverlay (webpack-internal:///./node_modules/#next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:258:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:754:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:893:25)
The "class" attribute is in the shadowDom.

Embed a React component into a HTML site, without affecting the parent site's styling and without an iframe

I have a React component that I want to build and insert into an HTML site. The component has some styling, which if imported will conflict with the HTML site's styling. I have a limitation that does not allow me to use an iframe. Does anyone know of any solutions that will allow me to scope the React component's css to only that component?

Nativescript vue slot default component issue

I was trying to create an mobile application with nativescript-vue and faced a problem with default component rendering while using slots.
So there is App.vue with Frame and inner slot.
<Frame ~mainContent>
<slot name="mainContent"></slot>
</Frame>
Also there is a router with available components:
import EducationPlacesList from './components/EducationPlacesList'
import PersonalProfile from './components/PersonalProfile'
const router = {
EducationPlacesList: EducationPlacesList,
PersonalProfile: PersonalProfile
}
And as Vue router is currently not supported for nativescript vue there is a solution for navigating through manual routing and it works just fine. I have a sidebar with labels and ontap there is a
this.$navigateTo(this.$router[to], options) - which perfectly redirects me by tapping.
But if i start my application and do not tap any of links there will be an empty space as expected. Because slot is empty until navigation to some page. I wonder, is there a good practice, how to set the default component for this slot.

How to tell what layout is being used within a Nuxt.js component?

I have two Nuxt.js layouts, default.vue and secondary.vue. There's the same footer.vue component that is being used in both of these layouts. I'd like to change some CSS classes inside of the footer.vue component based upon which layout the component is being used in. How Does one know what layout is being used from within a component nested in Nuxt.js layout?
You can use the following:
this.$nuxt.$data.layoutName
Which will return the name of the layout file used.

Categories