Console error/warning for every instance of the popover attribute that is not enclosed in brackets

[Chewieez]

Bug description:
Chromium: 109.0.5414.87 is now showing an error in the console about popover usage.
Found a 'popover' attribute. If you are testing the popover API, you must enable Experimental Web Platform Features. If not, note that custom attributes must start with 'data-': https://html.spec.whatwg.org/multipage/dom.html#custom-data-attribute. This usage will *likely cause site breakage* when the popover API ships: https://chromestatus.com/feature/5463833265045504.

Plunker/StackBlitz that reproduces the issue:
https://stackblitz.com/edit/angular-icrdyw
same in standalone window: https://angular-icrdyw.stackblitz.io/

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 9.0

Angular: 14

Bootstrap: 4.6

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior

No errors or warnings in console when using popover attribute from ngx-bootstrap.

Since the latest Chromium update, we now see an error for every instance that we use popover="simple message". The error goes away if we use the following syntax: [popover]="'simple message'"

[Chewieez]

Is the "needs: reproduce" label for internal team use or do you need more info from me?

Here is a screenshot of the error message in my Chrome console on my Mac.

[theandrewlane]

Also seeing this! Using [popover]="'simple message'" has resolved the error message.

Chrome: 109.0.5414.87
Angular: 9
ngx-bootstrap: 6.2.0

[SvetlanaMuravlova]

so, let's use [popover]="'simple message'" as workaround to avoid some Breaking Changes, docs are fixed

[Chewieez]

Do you know if this will be the only change to address this, or will there be a larger change in the future to move away from the popover syntax now that Chrome is using it?

Our app has about 350 instances of the popover="simple message" style syntax that will all need to change to [popover]="'simple message'" which will be a time commitment.

Thanks!

[SvetlanaMuravlova]

I think it is enough
there could be more changes or even changes of element selector if it  would needs after some new changes

[llutti]

This solution not work when using I18n localize, for example:

  <button type="button" i18n-popover="@@00012" [popover]="'An Example'">Not work</Button>

[nt1m]

I would suggest data-popover as attribute name, data- prefixed attributes are guaranteed to be unused by the web standards

[AlexanderZhukCoherent]

@SvetlanaMuravlova the solution to enclose in additional apostrophes won't work if we use binding to some HTML template either:

[popover]="someNGTemplateReference"

So need a different solution, thanks.