Tolgee plugin in chrome does not work for strings located in shadow dom about tolgee-js

[stepan662]

Hey, there is a targetElement property, which determins where should the observer look for translations, you can set it up to your container in shadow dom and looks like it works 🙂 At least I didn't find any issue with it.

Tolgee()
  ...
  .init({
    observerOptions: {
      targetElement: container,
    },
    ...
  });

[zeldigas]

@stepan662 thank you for the tip! I tried it with mixed success.

If tolgee is initialized with api key - then highlight of i18n keys works and popup with inline translations/screenshots works as well.

But if I rely on browser plugin, I can see only highlighted text - click on it does not show this inline translation modal window.

If I'll not find solution with real app codebase, I'll try to do some sample app to reproduce problem.

[stepan662]

I've tested it on this example app (branch: stepangranat/shadow-dom-example) and it seems to work regardless I use plugin or dev mode.

https://github.com/tolgee/react-example/tree/stepangranat/shadow-dom-example

[zeldigas]

@stepan662 sorry for delay. Indeed it works once provided target element. In my case there were 2 separate shadow dom locations, that required some coordination in initialization of tolgee (2 instances with different taget elemenents). But it works.